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

@import "~theme/globals";

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

    ion-select,
    ion-button {
        --icon-margin: 0 8px;
        --background: var(--core-combobox-background);
        --background-hover: #000000;
        --background-activated: #000000;
        --background-focused: #000000;
        --background-hover-opacity: .04;

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

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

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

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

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

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

ion-select,
ion-button {
    background: var(--background);
    color: var(--color);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 25px;
    overflow: hidden;
    margin: 8px;
    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);

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

    &::after {
        @include button-state();
        transition: var(--transition);
        z-index: -1;
    }

    &:hover::after {
        color: var(--color-hover);
        background: var(--background-hover);
        opacity: var(--background-hover-opacity);
    }

    &:focus::after,
    &:focus-within::after {
        color: var(--color-focused);
        background: var(--background-focused);
        opacity: var(--background-focused-opacity);
    }

    &[hidden] {
        display: none !important;
    }
}

ion-button {
    border-radius: var(--core-combobox-radius);

    flex: 1;
    min-height: 45px;

    &::part(native) {
        text-transform: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        border-radius: 0;
    }

    .select-text {
        margin-inline-end: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

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

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

    .select-icon {
        margin: var(--icon-margin);
        width: 19px;
        height: 19px;
        position: relative;

        .select-icon-inner {
            left: 5px;
            top: 50%;
            margin-top: -2px;
            position: absolute;
            width: 0px;
            height: 0px;
            color: currentcolor;
            pointer-events: none;
            border-top: 5px solid;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }
    }
}