@import "~theme/globals";

:host {
    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);
        --border-color: var(--core-combobox-border-color);
        --border-style: solid;
        --color-focused: currentcolor;
        --color-hover: currentcolor;

        --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: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

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

ion-select {
    border-bottom: var(--core-combobox-border-width) var(--border-style) var(--border-color);

    &::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);
    }
}

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

    flex: 1;
    min-height: 45px;

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

    .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;
        }
    }
}