/**
 * @package ROOTS-index
 * @license GPL-2.0-or-later
 */

@use "../foundations/var" as *;

.roots-index-toc-accordion{
    @include tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
}

.roots-index-toc-btn{
    display: none;

    @include tab{
            display: block !important;
            position: relative;
    }
}

.roots-index-toc-btn span{
    @include tab{
        display: block;
        align-items: center;
        width: 2.0rem;
        height: 2.0rem;
        background-color: var(--roots-index-accordion, #005bac);
        border-radius: 9999%;
        
        &::before{
            content: "";
            display: block;
            background-color: white;
            width: 60%;
            height: 2px;
            position: absolute;
            top: 45%;
            left: 20%;
            transition: all 0.4s ease;
        }
        &::after{
            content: "";
            display: block;
            background-color: white;
            width: 60%;
            height: 2px;
            position: absolute;
            top: 45%;
            left: 20%;
            transform: rotate(-90deg);
            transition: all 0.4s ease;
        }
    }
}

.roots-index-toc-accordion.active .roots-index-toc-btn span {
    &::after{
        transform: rotate(0deg);
    }
}

.roots-index-toc-list{
    @include tab{
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease;
    }
}