/*----------------------
    Accordions
------------------------*/
.accordion-item {
    padding: 22px 0;
    margin-top: -1px;
    border-top: 2px solid #e7ebef;
    border-bottom: 2px solid #e7ebef;
    background-color: $color-white;

    .accordion__title {
        font-family: $font-heading;
        font-weight: 700;
        font-size: 18px;
        cursor: pointer;
        display: block;
        position: relative;
        padding-left: 40px;
        color: $color-secondary;

        &:hover {
            color: $color-primary;
        }

        &:after {
            position: absolute;
            left: 0;
            top: 4px;
            content: "\f105";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 13px;
            text-align: center;
            width: 22px;
            height: 22px;
            line-height: 22px;
            border-radius: 50%;
            color: $color-white;
            background-color: $color-secondary;
        }
    }

    &.opened {
        border-color: $color-primary;

        .accordion__header:not(.collapsed) {
            .accordion__title {
                color: $color-primary;

                &:after {
                    content: "\f107";
                    background-color: $color-primary;
                }
            }
        }
    }

    .accordion__body {
        padding-top: 20px;

        p {
            margin-bottom: 0;
        }
    }
}

/* Mobile Phones and tablets */
@include xs-sm-screens {
    .accordion-item {
        padding: 10px 15px;

        .accordion__title {
            font-size: 14px;
        }

        .accordion__body p {
            font-size: 13px;
        }
    }
}