/**
 * Accordion Block
 * ----------------------------------------------------------------------------
 */

.block--accordion {
    .block__title {
        margin: $spacing--large 0;
        font-size: rem-calc(40);
        line-height: 1.2;

        @include breakpoint(medium) {
            font-size: rem-calc(60);
            margin: $spacing--xxlarge 0;
        }
    }
}

.accordion {

    .accordion-title {
        color: $color-gray-65;
        border-bottom: 1px solid $color-gray-25;
        display: block;
        line-height: 1.2;
        padding: $spacing--xsmall $spacing--xlarge $spacing--xsmall 0;
        font-size: rem-calc(20);
        margin-top: $spacing--small;
        position: relative;

        &:hover {
            color: $color-black;
            border-bottom: 1px solid $color-black;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            top:0;
            bottom: 0;
            height: 100%;
            width: $spacing--xlarge;
            background: url('assets/svg/chevron-down.svg') no-repeat transparent;
            background-position: center center;
            background-size: rem-calc(16);
            transition: transform .2s linear;
        }

        &[aria-expanded="true"]::after {
            content: '';
            transform: rotate(180deg);
        }
    }

    .accordion-content {
        display: none;
        font-size: rem-calc(16);
        padding: $spacing--small 0;
        color: $color-gray-55;
    }
}
