@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.accordion {
    // overflow: hidden;
    transition: max-height 0.5s ease;
    // max-height: 0;
    &--max{
        transition: all 0.4s ease-in-out;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }
    &--max.show{
        max-height: 500px;
        opacity: 1;
        overflow-y: auto;
        padding-left: 10px;
    }
    &--item {
        
        .arrow {
            @include maxOrientation(1024, portrait) {
                transition: 0.2s ease;
                transform: rotate(-90deg);

            }
            &.active {
                transform: rotate(0deg);
                transition: rotate 0.5s;
                @include maxOrientation(1024, portrait) {
                    transform: rotate(0deg);
                }
                
            }
        }
    }
    &--html{
        p{
            font-size: size(24);
            font-family: var(--inter-font);
            font-weight: $normal;
        }
        ul{
            list-style: none;
            li{
                font-family: var(--inter-font);
                font-size: size(24);
                font-weight: $normal;
            }
        }
    }
}