.accordion-collapse {
    transition: $transition-base;
}

// Accordion Default
.accordion-default {
    &.accordion {
        .accordion-button {
            padding: $accordion-button-padding-y $accordion-button-padding-x;
            color: $accordion-button-color;
            font-family: $headings-font-family;
            font-weight: $font-weight-medium;
            &:not(.collapsed){
                background: $white;
                color: $purple;
            }
        }
        .accordion-body {
            font-size: $_14px;
            line-height: $_24px;
            color: $gray-100;
        }
    }
}

// Accordion Flush
.accordion-flush {
    &.accordion {
        .accordion-button {
            &:not(.collapsed){
                background: $danger;
                color: $white;
            }
        }
        .accordion-item {
            border-color: $danger;
        }
    }
}

// Accordion Shadow
.accordion-shadow {
    &.accordion {
        border-radius: $_0px !important;
        .accordion-button {
            box-shadow: $_0px $_3px $_10px rgba(32, 32, 32, 0.1);
            color: $blue;
            &:not(.collapsed){
                color: $danger;
            }
        }
        .accordion-item {
            border-width: 0;
        }
        .accordion-button::after{
            color: red;
        }
    }
}

// Accordion Shadow Two
.accordion-shadow-two {
    &.accordion {
        border-radius: 0;
        .accordion-button {
            box-shadow: $_0px $_3px $_10px rgba(32, 32, 32, 0.1);
            color: $dark;
            &:not(.collapsed){
                background: $danger;
                color: $white;
                box-shadow: none;
            }
        }
        .accordion-item {
            border-width: 0;
        }
    }
}

// Accordion with Text Background
.accordion-textbg {
    &.accordion {
        border-radius: 0;
        .accordion-item {
            border-width: 0;
        }
        .accordion-button {
            background: $danger;
            color: $white;
            box-shadow: none;
        }
        .accordion-body {
            background: $light-400;
            color: $danger;
            font-size: $_14px;
            line-height: $_24px;
        }
    }
}

// Accordion With Icon
.accordion-icon {
    &.accordion {
        border-radius: 0;
        .accordion-button {
            box-shadow: $_0px $_3px $_10px rgba(32, 32, 32, 0.1);
            color: $dark;
            &:not(.collapsed){
                background: $purple;
                color: $white;
                box-shadow: none;
                position: relative;
                &::after{
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                }
            }
            &::after{
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%234E54C8' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            }
        }
        .accordion-item {
            border-width: 0;
        }
    }
}

// Accordion With Icon background
.accordion-icon-background {
    .card-body {
        box-shadow: $_0px $_0px $_20px rgba(214, 214, 214, 0.25);
    }
    &.accordion {
        .accordion-button {
            border-radius: $border-radius;
            overflow: hidden;
            box-shadow: $_0px $_3px $_10px rgba(32, 32, 32, 0.1);
            color: $dark;
            &::before {
                content: "";
                width: 55px;
                background: $light-400;
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
            }
            &:not(.collapsed){
                background: $red;
                color: $white;
                box-shadow: none;
                position: relative;
            }
            &::after{
                z-index: 1;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23FE696A' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            }
        }
        .accordion-item {
            border-width: 0;
            &:first-of-type .accordion-button {
                border-top-left-radius: $border-radius;
                border-top-right-radius: $border-radius;
            }
        }
    }
}

// Accordion With Icon Left
.accordion-icon-left {
    .card-body {
        box-shadow: $_0px $_0px $_20px rgba(214, 214, 214, 0.25);
    }
    &.accordion {
        .accordion-button {
            border-radius: 100px;
            overflow: hidden;
            box-shadow: $_0px $_3px $_10px rgba(32, 32, 32, 0.1);
            color: $purple;
            &:not(.collapsed){
                background: $purple;
                color: $white;
                box-shadow: none;
                position: relative;
                &::after{
                    
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
                }
            }
            &::after{
                order: -1;
                margin-left: 0; 
                margin-right:0.5em;
                z-index: 1;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%234E54C8' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
            }
        }
        .accordion-item {
            border-width: 0;
            &:first-of-type .accordion-button {
                border-top-left-radius: 100px;
                border-top-right-radius: 100px;
            }
            &:last-of-type .accordion-button.collapsed{
                border-bottom-left-radius: 100px;
                border-bottom-right-radius: 100px;
            }
        }
    }
}


// Accordion With number
.accordion-number {
    .card-body {
        box-shadow: $_0px $_0px $_20px rgba(214, 214, 214, 0.25);
    }
    &.accordion {
        .accordion-button {
            border-radius: 0;
            color: $purple;
            &:not(.collapsed){
                background: $purple;
                color: $white;
                box-shadow: none;
                position: relative;
                .counter {
                    color: $white;
                    background: #8084d9;
                }
                &::after{
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e");
                }
            }
            &::after{
                z-index: 1;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%234E54C8' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z'/%3e%3c/svg%3e");
            }
            .counter {
                font-family: $font-family-heading;
                font-size: $_10px;
                font-weight: $font-weight-medium;
                background: rgba($purple, 0.3);
                color: $purple;
                width: $_18px;
                height: $_18px;
                line-height: $_18px;
                text-align: center;
            }
        }
        .accordion-item {
            border-radius: 0;
            border-width: $_1px;
            border-color: $purple;
            &:not(:first-of-type) {
                border-top: $_1px solid $purple;
            }
        }
    }
}


// Accordion With Emphasazie
.accordion-emphasize {
    .card-body {
        box-shadow: $_0px $_0px $_20px rgba(214, 214, 214, 0.25);
    }
    &.accordion {
        .accordion-button {
            border-radius: 0;
            color: $gray-100;
            &:not(.collapsed){
                background: $purple;
                color: $white;
                box-shadow: none;
                position: relative;
                &::after{
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ededfa' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
                }
            }
            &::after{
                z-index: 1;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%237D879C' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
            }
        }
        .accordion-item {
            border-radius: 0;
            border-width: $_1px;
            border-color: $light-200;
            &:not(:first-of-type) {
                border-top: $_1px solid $light-200;
            }
        }
    }
}