////
///
/// Accordion Components Mixins Module
/// ===========================================================================
///
/// @group Components
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @todo None
/// @see https://www.w3schools.com/howto/howto_js_accordion.asp
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../head_layout" as *;

@use "../../soul_type" as *;

// ============================================================================
// Mixins
// ============================================================================

// ============================================================================
// Components | Accordion | Mixins
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;
@use "../../head_layout" as *;

@use "../../soul_type" as *;

/// Accordion base container
@mixin accordion--base {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--accordion-border-radius);
    overflow: hidden;
    background-color: var(--accordion-bg);
    color: var(--accordion-color);
}

/// Accordion item wrapper
@mixin accordion--item {
    border: var(--accordion-border-width) solid var(--accordion-border-color);
    background-color: var(--accordion-bg);
}

/// Accordion header
@mixin accordion--header {
    margin: 0;
    padding: 0;
}

/// Accordion toggle button
@mixin accordion--button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--accordion-button-padding-y)
        var(--accordion-button-padding-x);
    font-size: inherit;
    background-color: var(--accordion-button-bg);
    color: var(--accordion-button-color);
    border: none;
    text-align: left;
    cursor: pointer;
    transition: var(--accordion-transition);

    &::after {
        content: "";
        margin-left: auto;
        background-image: var(--accordion-button-icon);
        width: var(--accordion-button-icon-width);
        height: var(--accordion-button-icon-width);
        background-repeat: no-repeat;
        background-size: contain;
        transition: var(--accordion-button-icon-transition);
    }

    &:not(.collapsed) {
        background-color: var(--accordion-active-bg);
        color: var(--accordion-active-color);

        &::after {
            background-image: var(--accordion-button-active-icon);
            transform: var(--accordion-button-icon-transform);
        }
    }

    &:focus {
        outline: none;
        box-shadow: var(--accordion-button-focus-box-shadow);
    }
}

/// Accordion body content
@mixin accordion--body {
    padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}

/// Flush style (no borders or border radius)
@mixin accordion--flush {
    border: none;
    border-radius: 0;

    > .accordion--item {
        border: none;
        border-radius: 0;

        &:first-child {
            border-top: none;
        }
        &:last-child {
            border-bottom: none;
        }
    }
}

/// Style the buttons that are used to open and close the accordion panel
// .accordion {
//     background-color: #eee;
//     color: #444;
//     cursor: pointer;
//     padding: q(16);
//     width: 100%;
//     text-align: left;
//     border: none;
//     outline: none;
//     transition: 0.4s;
// }

// .accordion:after {
//   content: '\02795'; /* Unicode character for "plus" sign (+) */
//   font-size: 13px;
//   color: #777;
//   float: right;
//   margin-left: 5px;
// }

// .active:after {
//   content: "\2796"; /* Unicode character for "minus" sign (-) */
// }

// ============================================================================

// //
// Base styles
// //

// .accordion {
//   // scss-docs-start accordion-css-vars
//   --#{$prefix}accordion-color: #{$accordion-color};
//   --#{$prefix}accordion-bg: #{$accordion-bg};
//   --#{$prefix}accordion-transition: #{$accordion-transition};
//   --#{$prefix}accordion-border-color: #{$accordion-border-color};
//   --#{$prefix}accordion-border-width: #{$accordion-border-width};
//   --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
//   --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
//   --#{$prefix}accordion-button-padding-x: #{$accordion-button-padding-x};
//   --#{$prefix}accordion-button-padding-y: #{$accordion-button-padding-y};
//   --#{$prefix}accordion-button-color: #{$accordion-button-color};
//   --#{$prefix}accordion-button-bg: #{$accordion-button-bg};
//   --#{$prefix}accordion-button-icon: #{escape-svg($accordion-button-icon)};
//   --#{$prefix}accordion-button-icon-width: #{$accordion-icon-width};
//   --#{$prefix}accordion-button-icon-transform: #{$accordion-icon-transform};
//   --#{$prefix}accordion-button-icon-transition: #{$accordion-icon-transition};
//   --#{$prefix}accordion-button-active-icon: #{escape-svg($accordion-button-active-icon)};
//   --#{$prefix}accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow};
//   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
//   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
//   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
//   --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
//   // scss-docs-end accordion-css-vars
// }

// .accordion-button {
//   position: relative;
//   display: flex;
//   align-items: center;
//   width: 100%;
//   padding: var(--#{$prefix}accordion-button-padding-y) var(--#{$prefix}accordion-button-padding-x);
//   @include font-size($font-size-base);
//   color: var(--#{$prefix}accordion-button-color);
//   text-align: left; // Reset button style
//   background-color: var(--#{$prefix}accordion-button-bg);
//   border: 0;
//   @include border-radius(0);
//   overflow-anchor: none;
//   @include transition(var(--#{$prefix}accordion-transition));

//   &:not(.collapsed) {
//     color: var(--#{$prefix}accordion-active-color);
//     background-color: var(--#{$prefix}accordion-active-bg);
//     box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list

//     &::after {
//       background-image: var(--#{$prefix}accordion-button-active-icon);
//       transform: var(--#{$prefix}accordion-button-icon-transform);
//     }
//   }

//   // Accordion icon
//   &::after {
//     flex-shrink: 0;
//     width: var(--#{$prefix}accordion-button-icon-width);
//     height: var(--#{$prefix}accordion-button-icon-width);
//     margin-left: auto;
//     content: "";
//     background-image: var(--#{$prefix}accordion-button-icon);
//     background-repeat: no-repeat;
//     background-size: var(--#{$prefix}accordion-button-icon-width);
//     @include transition(var(--#{$prefix}accordion-button-icon-transition));
//   }

//   &:hover {
//     z-index: 2;
//   }

//   &:focus {
//     z-index: 3;
//     outline: 0;
//     box-shadow: var(--#{$prefix}accordion-button-focus-box-shadow);
//   }
// }

// .accordion-header {
//   margin-bottom: 0;
// }

// .accordion-item {
//   color: var(--#{$prefix}accordion-color);
//   background-color: var(--#{$prefix}accordion-bg);
//   border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);

//   &:first-of-type {
//     @include border-top-radius(var(--#{$prefix}accordion-border-radius));

//     > .accordion-header .accordion-button {
//       @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
//     }
//   }

//   &:not(:first-of-type) {
//     border-top: 0;
//   }

//   // Only set a border-radius on the last item if the accordion is collapsed
//   &:last-of-type {
//     @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));

//     > .accordion-header .accordion-button {
//       &.collapsed {
//         @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
//       }
//     }

//     > .accordion-collapse {
//       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
//     }
//   }
// }

// .accordion-body {
//   padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
// }

// Flush accordion items
// //
// Remove borders and border-radius to keep accordion items edge-to-edge.

// .accordion-flush {
//   > .accordion-item {
//     border-right: 0;
//     border-left: 0;
//     @include border-radius(0);

//     &:first-child { border-top: 0; }
//     &:last-child { border-bottom: 0; }

//     // stylelint-disable selector-max-class
//     > .accordion-collapse,
//     > .accordion-header .accordion-button,
//     > .accordion-header .accordion-button.collapsed {
//       @include border-radius(0);
//     }
//     // stylelint-enable selector-max-class
//   }
// }

// @if $enable-dark-mode {
//   @include color-mode(dark) {
//     .accordion-button::after {
//       --#{$prefix}accordion-button-icon: #{escape-svg($accordion-button-icon-dark)};
//       --#{$prefix}accordion-button-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
//     }
//   }
// }