.accordion {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.accordion > .accordion-item {
    > .accordion-title {
        display: flex;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        outline: none;
        color: inherit;
        border: none;
        text-align: left;
        background-color: var(--var-bg-color);
        color: var(--var-text-color);
        padding: 10px 15px;
        width: 100%;
    
        > * { flex-grow: 1; }
        > [class^="sci"] { flex-grow: 0; }
    }

    &.active > .accordion-title + .accordion-content {
        padding: 10px 15px;
        max-height: 100vh;
    }

    &.active > .accordion-title > .sci {
        display: none;
    }

    &.active > .accordion-title > .scia {
        display: inline-block;
    }
    
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: all .25s ease-in-out;
    }
}