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

// Responsive Border Style
// ============================================================================

/// Mixin for setting a responsive border with different widths based on screen size.
@mixin border_responsive {
    @include border_width(q(2));

    @media (max-width: q(600)) {
        @include border_width(q(1));
    }
}

// Responsive Border Thickness
// ============================================================================

/// Mixin to adjust border thickness based on screen size.
@mixin border_responsive_thickness {
    border: q(1) solid;

    @media (min-width: 7Q(68)) {
        border-width: q(2);
    }

    @media (min-width: 102Q(4)) {
        border-width: q(3);
    }
}

// Responsive Border Width
// ============================================================================

/// Mixin to adjust border width for smaller screens.
@mixin border-responsive {
    @include border-width(q(2));
}