@mixin details-summary(){


    summary,
    .summary-inner{
        display: flex;
        align-items: center;
        cursor: pointer;
        gap: 0.5ch;
    }

    .arrow-details{
        line-height: 0;
        --size:  11px;
        height: var(--size);
        width: var(--size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -2px;
    
        svg{
            transition: transform 0.2s ease-in;
            width: 100%;
            fill: var(--color-txt);
        }
        
    }

    &[open]{
        .arrow-details svg{
            transform: rotate(90deg);
        } 
    }
}