.aw-dropdown {
    z-index: 21;
    overscroll-behavior: contain;

    &--desktop {
        @apply bg-surface;
        scrollbar-width: thin;
        z-index: 30;
        overflow: auto;

        position: absolute;
    }

    &--desktop,
    .aw-select__dropdown {
        box-shadow: 0px 20px 40px rgba(var(--c-overlay-rgb), 0.1);
        border-radius: 10px;
        min-width: 160px;
        border: 1px solid var(--c-mono-900);
    }

    &--mobile {
        padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 1rem
            calc(env(safe-area-inset-bottom, 0px) + 1rem);

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        max-height: var(--viewport-height, 100vh);

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

        transform: translateY(var(--viewport-top, 0));
    }

    &__overlay {
        @apply bg-overlay;
        backdrop-filter: blur(10px);

        position: absolute;
        inset: 0;
    }

    &__title {
        text-align: center;
        position: relative;

        background-color: var(--c-surface);
        color: var(--c-mono-400);
        /* font-size: 0.75rem; */
        font-weight: 400;
        margin: 0;
        padding: 0.75rem 1.5rem;
        border-radius: 0.625rem 0.625rem 0 0;
    }

    &__description {
        background-color: var(--c-surface);
        color: var(--c-mono-400);

        text-align: center;
        font-size: theme('fontSize.sm', 0.875rem);

        margin: 0;
        padding: 0.75rem theme('spacing.4', 1rem);
        border-radius: 10px 10px 0 0;
        position: relative;
    }

    &__title + &__description {
        border-radius: 0;
        margin-top: -0.5rem;
        padding-block: 0;
    }

    &__content {
        max-height: 100%;

        hr + .aw-dropdown-button > span {
            text-align: center;
            justify-content: center;
        }
    }

    &__content--mobile {
        @apply bg-surface;
        /* max-height: 60%; */
        flex-shrink: 1;
        overflow: auto;
        position: relative;

        padding: 0;
        border-radius: 0.9375rem;
        margin-top: 0;

        /* .aw-dropdown-button > span {
            padding: 1rem 1.5rem;
        } */
    }

    &__title + &__content--mobile,
    &__description + &__content--mobile {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 1px solid var(--c-mono-900);
    }

    &__close {
        width: 100%;
        margin-top: 1rem;
        padding-top: 0;
        padding-bottom: 0;
        flex-shrink: 0;
        position: relative;

        &.aw-button.theme-ghost.color-surface {
            color: var(--c-on-overlay);
            @apply bg-mono-900;
            margin-top: 0.625rem;
        }
    }
}

.caret {
    transition: 200ms transform ease-out;
}

.rotate-90 {
    transform: rotate(-90deg);
}

.rotate-180 {
    transform: rotate(-180deg);
}

.transition-200 {
    transition: 200ms transform;
}