////
///
/// 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 *;

// ============================================================================
// Carousel Mixins
// ============================================================================

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

// Base Carousel Container
@mixin carousel--base {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: $carousel-height;
    perspective: q(500);
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
}

// Carousel Slider Variant
@mixin carousel--slider {
    top: 0;
    left: 0;

    .carousel-fixed-item {
        position: absolute;
        left: 0;
        right: 0;
        bottom: q(20);
        z-index: 1;

        &.with-indicators {
            bottom: q(68);
        }
    }

    .carousel-item {
        width: 100%;
        height: 100%;
        min-height: $carousel-height;
        position: absolute;
        top: 0;
        left: 0;

        h2 {
            font-size: q(24);
            font-weight: 500;
            line-height: q(32);
        }

        p {
            font-size: q(15);
        }
    }
}

// Carousel Item
@mixin carousel--item {
    visibility: hidden;
    width: $carousel-item-width;
    height: $carousel-item-height;
    position: absolute;
    top: 0;
    left: 0;

    > img {
        width: 100%;
    }
}

// Carousel Indicators
@mixin carousel--indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;

    .indicator-item {
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: q(8);
        width: q(8);
        margin: q(24) q(4);
        background-color: rgba(255, 255, 255, 0.5);
        transition: background-color 0.3s;
        border-radius: 50%;

        &.active {
            background-color: var(--color_surface_primary);
        }
    }
}

// ============================================================================
// Utility Classes
// ============================================================================

.carousel {
    @include carousel--base;
    &.carousel-slider {
        @include carousel--slider;
    }
    .carousel-item {
        @include carousel--item;
    }
    .indicators {
        @include carousel--indicators;
    }
}

// Materialbox Compatibility
.carousel.scrolling .carousel-item .materialboxed,
.carousel-item:not(.active) .materialboxed {
    pointer-events: none;
}

// .carousel {
//     &.carousel-slider {
//         top: 0;
//         left: 0;

//         .carousel-fixed-item {
//             &.with-indicators {
//                 bottom: q(68);
//             }

//             position: absolute;
//             left: 0;
//             right: 0;
//             bottom: q(20);
//             z-index: 1;
//         }

//         .carousel-item {
//             width: 100%;
//             height: 100%;
//             min-height: $carousel-height;
//             position: absolute;
//             top: 0;
//             left: 0;

//             h2 {
//                 font-size: q(24);
//                 font-weight: 500;
//                 line-height: q(32);
//             }

//             p {
//                 font-size: q(15);
//             }
//         }
//     }

//     overflow: hidden;
//     position: relative;
//     width: 100%;
//     height: $carousel-height;
//     perspective: q(500);
//     transform-style: preserve-3d;
//     transform-origin: 0% 50%;

//     .carousel-item {
//         visibility: hidden;
//         width: $carousel-item-width;
//         height: $carousel-item-height;
//         position: absolute;
//         top: 0;
//         left: 0;

//         & > img {
//             width: 100%;
//         }
//     }

//     .indicators {
//         position: absolute;
//         text-align: center;
//         left: 0;
//         right: 0;
//         bottom: 0;
//         margin: 0;

//         .indicator-item {
//             &.active {
//                 background-color: var(--color_surface_primary);
//             }

//             display: inline-block;
//             position: relative;
//             cursor: pointer;
//             height: q(8);
//             width: q(8);
//             margin: q(24) q(4);
//             background-color: rgba(255, 255, 255, 0.5);

//             transition: background-color 0.3s;
//             border-radius: 50%;
//         }
//     }

//     // Materialbox compatibility
//     &.scrolling .carousel-item .materialboxed,
//     .carousel-item:not(.active) .materialboxed {
//         pointer-events: none;
//     }
// }