@use "../abstracts/mixins";

$dropdown: "details[role="listbox"], details[role="list"], select";

// Common Styles

#{$dropdown} {

    --_border: var(--border-sm);

    --_font-size: var(--font-size);
    
    --_spacing-y: var(--md);
    --_spacing-x: var(--md);
    
    --_width: var(--w-full);
    
    cursor: pointer;

    font-size: var(--_font-size);

    padding-block: var(--_spacing-y);

    transition: outline .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);

    width: var(--_width);
}

details[role="listbox"],
details[role="list"] {

    & > ul {
        --bg: var(--muted-primary);
        --border: var(--border-sm);
        --width: var(--w-full);

        --_spacing-y: var(--md);

        background-color: var(--bg);
        border: var(--border);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow-x: hidden;

        & li, & > * {
            text-transform: capitalize;
        }

        & li {
            --font-size: var(--md);
            --text-color: var(--content-text);
            --font-weight: 500;
            --bg: inherit;
            --_roudness: 0;

            display: flex;
            align-items: center; /* Align items vertically if needed */
            width: 100%;
            font-size: var(--font-size);
            font-weight: var(--font-weight);
            color: var(--text-color);
            background-color: var(--bg);
            border-radius: var(--_roudness);
            padding: var(--spacing);
            
            transition: 
                background-color .4s ease,
                color .2s ease-in-out, 
                filter .2s ease-in;

            &:is(:hover, :focus, :focus-visible) {
                --bg: var(--primary);
                --text-color: var(--text);
            }

            &:has(> a:is(:focus, :focus-visible)) {

                --bg: var(--primary);
                --border: var(--border);
            }

            &:active {
                filter: var(--effect-bright);
            }

            & > a {
                --spacing-y: var(--sm);
                --spacing-x: var(--md);

                color: inherit;
                box-sizing: border-box;
                flex: 1; /* Allow the anchor tag to take up all available space */
                min-width: 0; /* Ensure it can shrink if needed */
                align-self: stretch;
                margin-inline: var(--spacing-x);
                padding-block: var(--spacing-y);
                border-radius: var(--roundness);

                &:focus-visible {
                    outline: none;
                }
            }
        }
    }
}

// SELECT

select {
    --text-color: var(--text);
    --font-weight: 500;

    appearance: none;

    padding-inline: var(--_spacing-x);
    
    text-transform: capitalize;

    background-image: var(--expand-icon);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--font-size)) center;

    &::-ms-expand {
        display: none;
    }

    &:is(:hover, :focus, :focus-visible) {
        --bg: var(--primary);
    }

    &:focus-visible {
        --outline: var(--outline);

        outline: var(--outline);
    }

    @include icon(var(--expand-icon));
        
    &::after {
        rotate: -90deg;
        transition: rotate .4s var(--transition-out-back);
        z-index: -200;
        background-color: khaki;
    }

    /* &::after {
        content: "";
        width: 30em;
        height: 30em;
        background-color: var(--select-arrow);
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        z-index: 2000;
    } */
    
    &, & > * {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
    
    & > option {
        --bg: var(--muted-primary);
        --border: var(--border-sm);
        --_text-color: var(--content-text);

        color: var(--text-color);
        background-color: var(--bg);
        border-radius: 0;
        padding: var(--spacing);
        cursor: pointer;

        transition: background-color .8s ease, filter .2s ease-in;

        &:hover {
            --bg: var(--primary);
        }

        &:active {
            filter: var(--effect-bright);
        }

        &[selected] {

           background-color: var(--muted-primary);
        }
    }
}