Vmeda.Online/src/core/components/combobox/combobox.scss

@use "theme/globals" as *;

:host {
    max-width: 100%;
    display: block;
    @include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));

    &.no-border {
        --core-combobox-border-width: 0px;

        ion-select.combobox-icon-only {
            --padding-start: 8px;

            &::part(icon) {
                display: none;
            }

            &::part(label) {
                position: static;
            }

            ion-icon {
                margin: var(--icon-margin);
                font-size: 20px;
            }
        }
    }


    ion-select,
    ion-button {
        --icon-margin: 0 4px;

        --background: var(--core-combobox-background);

        --border-color: var(--core-combobox-border-color);
        --border-style: solid;
        --border-width: var(--core-combobox-border-width);
        --border-radius: var(--core-combobox-radius);

        --box-shadow: var(--core-combobox-box-shadow);

        --padding-start: 16px;
        --padding-end: 8px;
        --padding-top: 8px;
        --padding-bottom: 8px;

        background: var(--background);
        color: var(--color);
        text-overflow: ellipsis;
        white-space: nowrap;
        min-height: var(--a11y-min-target-size);
        overflow: hidden;
        box-shadow: var(--box-shadow);

        &:focus,
        &:focus-within {
            @include core-focus-style();
        }
    }

    ion-select {
        border-color: var(--border-color);
        border-style: var(--border-style);
        border-width: var(--border-width);
        border-radius: var(--core-combobox-radius);
        margin: 8px;

        &.combobox-icon-only {
            &::part(text) {
                display: none;
            }
        }

        &::part(label) {
            position: absolute;
            margin-inline: 0px;
        }

        &::part(icon) {
            margin: var(--icon-margin);
            opacity: 1;
        }
    }

    ion-button {
        --color: var(--core-combobox-color);
        --color-activated: var(--core-combobox-color);
        --color-focused: currentcolor;
        --color-hover: currentcolor;

        --background-hover: black;
        --background-activated: black;
        --background-focused: black;
        --background-hover-opacity: .04;

        &.md {
            --background-activated-opacity: 0;
            --background-focused-opacity: .12;
        }

        &.ios {
            --background-activated-opacity: .12;
            --background-focused-opacity: .15;
        }

        border-radius: var(--core-combobox-radius);
        margin: 4px 8px;

        flex: 1;

        &::part(native) {
            font-weight: var(--label-font-weight);
            font-size: var(--label-lg-font-size);
            line-height: var(--label-lg-line-height);
            border-radius: var(--core-combobox-radius);
        }

        .select-text {
            @include margin-horizontal(null, auto);
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sr-only {
            @include sr-only();
        }

        &.ion-activated {
            --color: var(--color-activated);
        }

        ion-icon {
            margin: var(--icon-margin);
        }
    }

}