.atm-form-select {
    .form-select {
        @apply h-12;
        @apply w-full;
        @apply border-shade;

        &:focus {
            @apply border-cta;
        }

        &[disabled] {
            @apply bg-shade;
        }
    }
}

.atm-form-select--choices {
    @apply relative;

    /* Legacy select styling (fallback) */
    .form-select {
        @apply text-h1 font-display text-secondary-col-1;
        @apply border-none outline-none;

        &:focus {
            @apply border-none outline-none;
        }

        &[disabled] {
            @apply bg-shade;
        }
    }

    /* Custom select styling */
    .custom-select-wrapper {
        @apply relative w-max;
    }

    .custom-select-trigger {
        @apply text-left;
        @apply text-h5 md:text-h1 font-display text-secondary-col-1;
        @apply border-none;
        @apply cursor-pointer flex items-center;
        @apply transition-opacity duration-200;

        &:hover {
            @apply opacity-80;
        }

        &[aria-expanded='true'] {
            .custom-select-arrow i {
                @apply rotate-180;
            }
        }
    }

    .custom-select-arrow {
        @apply ml-4 flex items-center;

        i {
            @apply transition-transform duration-200 text-xs md:text-h4;
        }
    }

    .custom-select-dropdown {
        @apply absolute top-full right-0 md:left-0 w-full min-w-[50vw] md:min-w-[20rem] text-left mt-3;
        @apply bg-white rounded-3xl shadow-[0_4px_6px_-2px_rgba(0,0,0,0.1)];
        @apply opacity-0 invisible pointer-events-none;
        @apply mt-3;
        @apply z-50 max-h-64 overflow-y-auto;
        transition: all 0.2s ease-in-out;
        list-style: none;
        padding: 0;

        &.active {
            @apply opacity-100 visible pointer-events-auto;
        }
    }

    .custom-select-option {
        @apply px-6 py-4 cursor-pointer;
        @apply text-lg font-display text-black;
        @apply transition-colors duration-150;

        &:hover {
            @apply bg-gray-100;
        }

        &.selected {
            @apply text-secondary-col-1;

            &:hover {
                @apply text-secondary-col-1;
            }
        }

        &:first-child {
            @apply rounded-t-lg;
        }

        &:last-child {
            @apply rounded-b-lg;
        }
    }
}