@use "../abstracts/mixins";

// ACCORDION

details {

    --bg: var(--primary);
    --roundness: var(--xs);
    --spacing: var(--md);
    --outline: var(--outline-md);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
    
    summary {
        background-color: var(--bg);
        border-radius: var(--roundness);
        padding: var(--spacing);
        
        margin-bottom: var(--sm);
        display: flex;
        align-items: center;
        justify-content: space-between;

        
        @include icon(var(--expand-icon)); // ICON MIXIN
        
        &::after {
            rotate: -90deg;
            transition: rotate .4s var(--transition-out-back);
        }
        
        &:is(:focus, :hover) {

            filter: brightness(125%);
            cursor: pointer;
        }

        &:focus {

            outline-offset: .150rem;
            outline: var(--outline);
        }

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

        &:is(::marker, ::-webkit-details-marker) {
            display: none;
        }

        transition: all .4s ease, filter .145s ease-out;
    }

    p {
        --bg: var(--muted-primary);
        background-color: var(--bg);
        padding: var(--spacing);
        border-radius: var(--roundness);
        transition: all .4s ease;
    }

    &[open] > summary::after {

        rotate: initial;
    }
}

@keyframes margin-transition {
    0% {

        margin-bottom: 0;
    }

    100% {

        margin-bottom: var(--spacing);
    }
}