.aw-select {
    position: relative;

    & .not-searchable,
    & .not-searchable .aw-text-field__element {
        @apply cursor-pointer;
    }

    &__underlay {
        @apply bg-overlay;
        display: none;

        backdrop-filter: blur(10px);

        position: fixed;
        inset: 0;
        z-index: 119;

        &--visible {
            display: block;
        }
    }

    &__input-wrap {
        display: flex;
    }

    &__dropdown {
        @apply bg-surface;

        border-radius: 0.625rem;

        visibility: visible;
        pointer-events: all;
        overflow: auto;

        position: fixed;
        inset: theme('spacing.2', 0.5rem);
        bottom: auto;
        max-height: calc(100% - 2 * theme('spacing.2', 0.5rem));
        z-index: 120;

        &--hidden {
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            z-index: -1;
        }

        &--keyboard {
            max-height: 44vh;
            height: fit-content;
        }
    }

    &__dropdown-input-wrap {
        @apply bg-surface p-2;
        position: sticky;
        top: 0;
        z-index: 1;

        /* &:after {
            content: '';
            @apply border-t mt-2;
            display: block;
            width: 100%;
            max-height: 1px;
        } */

        .aw-text-field__prefix {
            background: transparent;
            padding-left: 0.1875rem;
        }
    }

    &__notify {
        background: var(--c-surface);
        color: var(--c-mono-400);
        text-align: center;
        font-size: theme('fontSize.sm', 0.875rem);
        padding: theme('spacing.3', 0.75rem) theme('spacing.5', 1.25rem);

        &--loading {
            position: sticky;
            bottom: 0;
            z-index: 1;
        }
    }

    &__mobile-input {
        position: sticky;
        top: 0;
        z-index: 20;

        &.opened,
        & .aw-text-field__element {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &.opened:focus-within {
            border-top: 0;
            border-left: 0;
            border-right: 0;
        }

        &.opened ~ .aw-dropdown-button > span {
            @apply px-4;
        }

        &.opened .aw-text-field__element {
            @apply pl-4;
        }

        &.opened .aw-text-field__label {
            left: 1rem;
        }

        .aw-text-field__prefix {
            background: transparent;
            padding-left: 0.1875rem;
        }
    }

    &--mobile-opened .aw-select__dropdown {
        top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
        bottom: max(auto, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
    }
}

@screen md {
    .aw-select {
        &__dropdown {
            @apply bg-surface shadow;

            overflow: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;

            width: 100%;
            max-height: 50vh;

            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 120;

            &::-webkit-scrollbar {
                background-color: transparent;
                height: 0.5rem;
                width: 0.5rem;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgba(var(--c-on-surface-rgb), 0.1);
            }
        }
    }
}