.accordion-list {
    margin-bottom: -1rem;

    .accordion {
        margin-bottom: 1rem;
    }
}

.accordion {
    background: $lightGray;

    &__head {
        padding: 1.5rem;

        &:hover, &:active, &:focus {
            .accordion {
                &__title {
                    text-decoration: none;
                }
            }
        }

        &:hover {
            cursor: pointer;
        }
    }

    &__inner {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    &__title {
        @include close(1rem, 2px, $black);
        display: block;
        margin-bottom: 0;

        &:before, &:after {
            position: absolute;
            right: 0;
            top: 1rem;
        }
    }

    /* closed */
    &__content {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-in;
    }

    /* active */
    &--active {
        .accordion {
            &__content {
                opacity: 1;
                max-height: 3000px;
                transition: max-height 1s ease-in;
            }

            &__title {
                @extend .accordion__title--active;
            }
        }
    }
}

@media screen and (max-width: $lg) {
}

@media screen and (max-width: $md) {
}

/* mobile < 768 */
@media screen and (max-width: $sm) {
}

@media screen and (max-width: $xs) {
}

@media screen and (max-width: $xxs) {
}
