.accordion {
    margin-bottom: $spacer * 2.125;
    margin-top: $spacer;
    > dt,
    &-header {
        border: 1px solid $accordion-border-color;
        border-radius: $border-radius;
        padding: $accordion-header-padding;
        background-color: $according-header-active-bg;
        margin-bottom: -1px;
        margin-top: 1rem;
        position: relative;
        cursor: pointer;

        &:first-child {
            margin-top: 0;
        }
        &-item-button {
            content: "";
            border: none;
            width: 1rem;
            height: 1rem;
            position: absolute;
            right: nth($accordion-header-padding,2)*0.5;
            background: transparent url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='%23227592' fill-rule='evenodd' d='M15 8.986h-6.014v6.014h-1.972v-6.014h-6.014v-1.972h6.014v-6.014h1.972v6.014h6.014z'/%3e%3c/svg%3e") center no-repeat;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }
        &.active {
            background-color: $according-header-active-bg;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            button {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3e%3cpath fill='%233C4553' fill-rule='evenodd' d='M15 8.425h-14v-1.85h14z'/%3e%3c/svg%3e");
            }
        }
    }
    > dd,
    &-body {
        max-height: 0;
        overflow: hidden;
        border-radius: 0 0 $border-radius $border-radius;
        box-sizing: border-box;
        border: 0 solid $accordion-border-color;
    }
    > dt.active + dd,
    &-header.active + &-body {
        max-height: max-content;
        border-width: 1px;
        p:last-child {
            margin-bottom: 0.2rem;
        }
    }
    > dd > div,
    &-item-content {
        padding: $accordion-header-padding;
    }
    > dt > h4,
    &-item-title {
        margin-bottom: 0;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
    }
    &-faq {
        margin-bottom: $spacer * 2.125;
    margin-top: $spacer;
    > dt,
    &-header {
        border-bottom: 1px solid $accordion-border-color;
        border-radius: $border-radius;
        padding: $accordion-header-padding;
        margin-bottom: -1px;
        margin-top: 1rem;
        position: relative;
        color: #0074A3;;
        cursor: pointer;

        &:first-child {
            margin-top: 0;
        }
        &-item-button {
            content: "";
            border: none;    
            width: 20px;
            height: 20px;
            position: absolute;
            right: nth($accordion-header-padding,2)*0.5;
            background: transparent url("../img/icons/arrow-right-light.svg") no-repeat center;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }
        &.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            button {
                background-image: url("../img/icons/arrow-right-light.svg");
                transform: rotate(90deg);
            }
        }
    }
    > dd,
    &-body {
        max-height: 0;
        overflow: hidden;
        border-radius: 0 0 $border-radius $border-radius;
        box-sizing: border-box;
        border: 0 solid $accordion-border-color;
    }
    > dt.active + dd,
    &-header.active + &-body {
        max-height: max-content;
        border-width: 1px;
        p:last-child {
            margin-bottom: 0.2rem;
        }
    }
    > dd > div,
    &-item-content {
        padding: $accordion-header-padding;
    }
    > dt > h4,
    &-item-title {
        margin-bottom: 0;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
    }
    }
}