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: var(--mdl-typography-icon-fontSize-md);
            }
        }
    }

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

        --background: var(--core-combobox-background);
        --background-hover: var(--ion-text-color);
        --background-activated: var(--ion-text-color);
        --background-focused: var(--ion-text-color);
        --background-hover-opacity: .04;

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

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

        --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-sizing-minTargetSize);
        overflow: hidden;
        box-shadow: var(--box-shadow);

        --highlight-color: transparent !important;
    }

    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;
        width: auto;

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

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

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

        &:hover {
            --background: rgba(var(--ion-text-color-rgb), var(--background-hover-opacity));
        }

        &:focus,
        &:focus-visible,
        &.ion-focused {
            --background: rgba(var(--ion-text-color-rgb), var(--background-focused-opacity));
        }

        &.ion-activated {
            --background: rgba(var(--ion-text-color-rgb), var(--background-activated-opacity));
        }
    }

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

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

        flex: 1;

        &::part(native) {
            font: var(--mdl-typography-label-font-lg);
            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);
        }
    }

}