.accordion {
    //a single accrodion
    &__item {
        margin-bottom: 1.25rem;
    }

    //accrodion header styles
    &__header {
        padding: 0.9375rem;
        border: 1px solid $border;
        cursor: pointer;
        position: relative;
        color: $heading;
        font-weight: 500;
        @at-root [data-theme-version="dark"] & {
            color: $white;
            border-color: $d-border;
        }
        
        

        //set the indicator font family
        &--indicator {
            font-family: 'themify';
            position: absolute;
            right: 1.5625rem;
            top: 50%;
            transform: translateY(-50%);

            &.indicator_bordered {
                display: inline-block;
                width: 25px;
                text-align: center;
                height: 25px;
                border: 1px solid $border;
                border-radius: 50%;
                line-height: 25px;
            }
        }

        &:not(.collapsed) {
            .accordion__header--indicator {
                &::before {
                    content: "\e622";
                }

                //icon style
                &.style_two {
                    &::before {
                        content: "\e648";
                    }
                }
            }
        }

        &.collapsed {
            .accordion__header--indicator {
                &::before {
                    content: "\e61a";
                }

                //icon style
                &.style_two {
                    &::before {
                        content: "\e64b";
                    }
                }
            }
        }
    }

    //accordion body styles
    &__body {
        &--text {
            padding: 0.9375rem;
        }
        
    }

    //accrodion with border
    &-bordered {
        .accordion__body {
            border: 1px solid $border;
            border-top: none;
            @at-root [data-theme-version="dark"] & {
                border-color: $d-border;
            }
        }
    }

    //accrodion without space
    &-no-gutter {
        .accordion__item {
            margin-bottom: 0;

            .accordion__header {
                &.collapsed {
                    border-bottom: none;
                }
            }

            &:last-child {
                .accordion__header {
                    border-bottom: 1px solid $border;
                    @at-root [data-theme-version="dark"] & {
                        border-color: $d-border;
                    }
                }
            }
            
        }
    }

    //not gutter and bordered
    &-no-gutter.accordion__bordered {
        .accordion__item {
            &:not(:last-child) {
                .accordion__body {
                    border-bottom: none;
                }
            }
        }
    }

    //indicator in left positon
    &-left-indicator {
        .accordion__header {
            &--text {
                padding-left: 2.5rem;
            }

            &--indicator {
                right: auto;
                left: 1.5625rem;
            }
        }
    }

    //with icon
    &-with-icon {
        .accordion__header {
            &--text {
                padding-left: 2.5rem;
            }

            &--icon {
                position: absolute;
                right: auto;
                left: 1.5625rem;
                font-family: 'themify';

                &::before {
                    content: "\e645";
                }
            }
        }

    }

    //with header background
    &-header-bg {
        .accordion__header {
            background-color: darken($color: $white, $amount: 5%);
            @at-root [data-theme-version="dark"] & {
                background-color: $d-bg;
                color: $white;
            }
            
            &--primary {
                background-color: $primary;
                color: $white;
            }
            
            &--info {
                background-color: $info;
                color: $white;
            }

            &--success {
                background-color: $success;
                color: $white;
            }
        }
    }

    //with header background and no space
    &-header-bg.accordion-no-gutter {
        .accordion__header {
            border-color: transparent;
        }
    }

    //with solid background
    &-solid-bg {
        .accordion__header {
            border-color: transparent;
            background-color: darken($color: $white, $amount: 5%);
            @at-root [data-theme-version="dark"] & {
                background-color: $d-bg;
            }
        }

        .accordion__body {
            border-color: transparent;
            background-color: darken($color: $white, $amount: 5%);
            @at-root [data-theme-version="dark"] & {
                background-color: $d-bg;
            }
        }
    }

    //active header styles
    &-active-header {
        .accordion__header {
            &:not(.collapsed) {
                background-color: $info;
                color: $white;
            }
        }
    }

    //shadow in header
    &-header-shadow {
        .accordion__header {
            border: none;
            box-shadow: 0 0 0.9375rem -3px rgba($color: $black, $alpha: .3);
        }
    }

    //stylishly rounded borders
    &-rounded-stylish {
        .accordion__header {
            border-top-left-radius: 1.25rem;
            border-top-right-radius: 1.25rem;
        }

        .accordion__body {
            border-bottom-left-radius: 1.25rem;
            border-bottom-right-radius: 1.25rem;
        }
    }

    //smothly rounded accrodion header
    &-rounded {
        .accordion__header {
            border-radius: 0.3125rem;
        }
    }

    //accordion gradient
    &-gradient {
        .accordion__header {
            color: $white;
            background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
            border-color: transparent;
        }

        .accordion__body {
            color: $white;
            background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
            border-color: transparent;
        }
    }
}