// Accordion styles for dark theme
@mixin dark-theme-accordion {
    background-color: $dark;
    color: $light;

    .btn-arrow::after,
    .btn-arrow::before {
        background-color: $light !important;
    }
}

// Accordion styles for light theme
@mixin light-theme-accordion {
    background-color: $light;
    color: $dark;

    .btn-arrow::after,
    .btn-arrow::before {
        background-color: $dark !important;
    }
}

// Base accordion styles
.accordion {
    overflow: hidden;
    position: relative;
    border-radius: $base-border-radius;

    border-style: solid;
    border-width: $base-border-sickness / 2;
    border-color: generate-shade(map-get($base-color-palette, "gray"), 30, 'lighten');

    // Base accordion item styles
    .accordion-item {
        border-style: solid;
        border-width: 0 0 $base-border-sickness/2 0;
        border-color: generate-shade(map-get($base-color-palette, "gray"), 30, 'lighten');

        // Disable the border styles for the last accordion item
        &:nth-last-child(1) {
            border-width: 0 !important;
        }

        // Include light theme styles by default
        @include light-theme-accordion;

        // Accordion header styles
        .accordion-header {
            padding: $base-padding;

            display: flex;
            justify-content: space-between;
            align-items: center;

            // Accordion title styles
            .accordion-title {
                font-size: 20px;
            }

            // Apply the cursor pointer to all inner tags
            *, & {
                cursor: pointer !important;
            }
        }

        // Accordion collapse styles
        .accordion-collapse {
            overflow: hidden;
            transition: all $base-transition-time ease;

            // Hide it by default
            height: 0;

            // Accordion body styles
            .accordion-body {
                padding: $base-padding;
            }
        }


        // Styles for the active accordion status
        &.collapsed {
            .accordion-header {
                @include active-object-color();
            }
        }
    }
}


// Accordion styles for different themes
body[data-theme="dark"] {
    .accordion-item {
        @include dark-theme-accordion;
    }
}

body[data-theme="light"] {
    .accordion-item {
        @include light-theme-accordion;
    }
}

.accordion[data-theme="dark"] {
    .accordion-item {
        @include dark-theme-accordion;
    }
}

.accordion[data-theme="light"] {
    .accordion-item {
        @include light-theme-accordion;
    }
}