// ============================================================================
// Element | Lines
// ============================================================================
@use "../../variables" as *;

// Horizontal Line
// ----------------------------------------------------------------------------

/// Base styling for horizontal rules (HR elements).
///
/// This mixin resets default browser styles and applies consistent border,
/// margin, and width settings.
@mixin hr--base {
    // Reset
    overflow: visible; /* Show the overflow in Edge and IE */
    height: 0; /* Add the correct box sizing in Firefox */
    color: inherit; /* Correct border color in Firefox. */
    box-sizing: content-box; /* Normalize box-sizing */

    // Border - only set border-top for a single line
    border: none;
    border-top: q(1) solid var(--color_line_primary);

    // Margin
    margin-top: q(32);
    margin-bottom: q(32);
    margin-left: 0;
    margin-right: 0;

    // Size
    width: 100%;
    opacity: 1;
}

/// Thick border styling for horizontal rules.
@mixin hr--thick {
    border-top-width: q(3);
}

/// Dotted border styling for horizontal rules.
@mixin hr--dotted {
    border-top-style: dotted;
}

/// Dashed border styling for horizontal rules.
@mixin hr--dashed {
    border-top-style: dashed;
}

/// Colored border styling for horizontal rules.
///
/// @param {Color} $color - The color for the border. Defaults to #ff4500.
@mixin hr--colored($color: #ff4500) {
    border-top-color: $color;
}

/// Double border styling for horizontal rules.
@mixin hr--double {
    border-top: double q(4) #ccc;
    height: q(4);
}

/// Faded border styling for horizontal rules.
@mixin hr--faded {
    border-top: q(1) solid rgba(0, 0, 0, 0.1);
}

/// Responsive margin adjustment for horizontal rules.
///
/// Reduces top and bottom margins on smaller screens.
@mixin hr--responsive {
    @media (max-width: 600px) {
        margin: q(10) 0;
    }
}

// Custom Line Mixins
// ----------------------------------------------------------------------------

/// Custom line mixin for main sections.
@mixin line_main {
    border-top: q(1) solid var(--color_text_primary);
}

/// Custom line mixin for footer sections.
@mixin line_footer {
    border-top: q(1) solid var(--color_accent_tertiary);
}

// Separator Line Mixins
// ----------------------------------------------------------------------------

@mixin separator-line-verticle-extra-small {
    width: q(1);
    height: q(8);
}

@mixin separator-line-verticle-small-thick {
    width: q(8);
    height: q(3);
}

@mixin separator-line-verticle-small {
    width: q(1);
    height: q(12);
}

@mixin separator-line-verticle-small-thick2 {
    width: q(64);
    height: q(8);
}

@mixin separator-line-verticle-large {
    width: q(1);
    height: q(20);
}

@mixin separator-line-verticle-extra-large {
    width: q(1);
    height: q(32);
}

@mixin separator-line-verticle-extra-large2 {
    width: q(1);
    height: q(80);
}

@mixin separator-line-verticle-medium-thick-full {
    width: q(8);
    height: q(140);
}

@mixin separator-line-verticle-large-thick {
    width: 10Q (8);
    height: q(1);
}

@mixin separator-line-horizontal-medium-light {
    width: 3Q (6);
    height: q(3);
}

@mixin separator-line-horizontal-medium-light2 {
    width: 40%;
    height: q(1);
}

@mixin separator-line-horizontal-medium-light3 {
    width: 18%;
    height: q(1);
}

@mixin separator-line-horizontal-medium-thick {
    width: q(50);
    height: q(5);
}

@mixin separator-line-horizontal-full {
    width: 100%;
    height: q(1);
}

/// Mixin for full-width divider.
@mixin divider-full {
    width: 100%;
    height: q(1);
    display: inline-block;
}

// ============================================================================
// Rule Modifiers (horizontal rule variants)
// ============================================================================

/// Subtle rule with reduced visual weight
/// @group Rules
@mixin hr--subtle {
    opacity: 0.5;
}

/// Accent colored rule using primary accent
/// @group Rules
@mixin hr--accent {
    border-top-color: var(--color_accent_primary);
}

/// Secondary accent colored rule
/// @group Rules
@mixin hr--accent-secondary {
    border-top-color: var(--color_accent_secondary);
}

/// Compact rule with reduced margins
/// @group Rules
@mixin hr--compact {
    margin: q(12) 0;
}

/// Spacious rule with larger margins
/// @group Rules
@mixin hr--spacious {
    margin: q(48) 0;
}

/// Flush rule with no margins
/// @group Rules
@mixin hr--flush {
    margin: 0;
}

/// Gradient rule - decorative fade effect
/// @group Rules
@mixin hr--gradient {
    border: none;
    height: q(2);
    background: linear-gradient(
        to right,
        transparent,
        var(--color_line_primary),
        transparent
    );
}

/// Accent gradient rule - decorative fade with accent color
/// @group Rules
@mixin hr--gradient-accent {
    border: none;
    height: q(2);
    background: linear-gradient(
        to right,
        transparent,
        var(--color_accent_primary),
        transparent
    );
}