////
///
/// 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
// ============================================================================

$carousel-height: q(320) !default;
$carousel-item-width: 100% !default;
$carousel-item-height: $carousel-height !default;

// 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 (for slider variant)
@mixin carousel-fixed-item--base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: q(20);
    z-index: 1;
}

// Carousel Fixed Item with Indicators modifier
@mixin carousel-fixed-item--with-indicators {
    bottom: q(68);
}

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

// Carousel Item Image
@mixin carousel-item--img {
    width: 100%;
}

// Carousel Item in Slider context
@mixin carousel-item--slider {
    width: 100%;
    height: 100%;
    min-height: $carousel-height;
    position: absolute;
    top: 0;
    left: 0;
}

// Carousel Item H2 (slider context)
@mixin carousel-item--h2 {
    font-size: q(24);
    font-weight: 500;
    line-height: q(32);
}

// Carousel Item Paragraph (slider context)
@mixin carousel-item--p {
    font-size: q(15);
}

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

// Indicator Item Base
@mixin indicator-item--base {
    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%;
}

// Indicator Item Active State
@mixin indicator-item--active {
    background-color: var(--color_surface_primary);
}

// Materialbox Disabled State (for scrolling/inactive items)
@mixin materialboxed--disabled {
    pointer-events: none;
}