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

    // Border
    border: none;
    border: q(1) solid var(--color_fill_primary);
    // border-top: q(1) solid #ccc;
    // border-bottom: q(2) solid var(--color-primary);
    // border: q(1) solid $color-secondary;
    border-radius: q(0.5);

    // Margin
    margin-top: q(32);
    margin-bottom: q(32);
    // margin: q(20) 0;
    // margin: 1.875rem 0;

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

    // Color
}

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

// Applying Mixins to Classes
// ============================================================================

hr {
    @include hr--base;
}
.hr--base {
    @include hr--base;
}
.hr--thick {
    @include hr--base;
    @include hr--thick;
}
.hr--dotted {
    @include hr--base;
    @include hr--dotted;
}
.hr--dashed {
    @include hr--base;
    @include hr--dashed;
}
.hr--colored {
    @include hr--base;
    @include hr--colored;
}
.hr--double {
    @include hr--base;
    @include hr--double;
}
.hr--faded {
    @include hr--base;
    @include hr--faded;
}
.hr--responsive {
    @include hr--base;
    @include hr--responsive;
}

// Custom Lines

/// Custom lines for specific page sections.
.line_main {
    border-top: q(1) solid var(--color_text_primary);
}
.line_footer {
    border-top: q(1) solid var(--color_accent_tertiary);
}

// Separator lines with specific dimensions
// ----------------------------------------------------------------------------
// These utility classes are for creating vertical and horizontal separator lines
// with various thicknesses and lengths.

.separator-line-verticle-extra-small {
    width: q(1);
    height: q(8);
}
.separator-line-verticle-small-thick {
    width: q(8);
    height: q(3);
}
.separator-line-verticle-small {
    width: q(1);
    height: q(12);
}
.separator-line-verticle-small-thick2 {
    width: q(64);
    height: q(8);
}
.separator-line-verticle-large {
    width: q(1);
    height: q(20);
}
.separator-line-verticle-extra-large {
    width: q(1);
    height: q(32);
}
.separator-line-verticle-extra-large2 {
    width: q(1);
    height: q(80);
}
.separator-line-verticle-medium-thick-full {
    width: q(8);
    height: q(140);
}
.separator-line-verticle-large-thick {
    width: 10Q (8);
    height: q(1);
}
.separator-line-horrizontal-medium-light {
    width: 3Q (6);
    height: q(3);
}
.separator-line-horrizontal-medium-light2 {
    width: 40%;
    height: q(1);
}
.separator-line-horrizontal-medium-light3 {
    width: 18%;
    height: q(1);
}
.separator-line-horrizontal-medium-thick {
    width: q(50);
    height: q(5);
}
.separator-line-horrizontal-full {
    width: 100%;
    height: q(1);
}

// Divider class for full-width lines
.divider-full {
    width: 100%;
    height: q(1);
    display: inline-block;
}