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

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

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

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

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

/// Class to adjust border thickness based on screen size.
.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
// ============================================================================

/// Media query to adjust border width for elements with the `.border-responsive` class on smaller screens.
@media (max-width: 600px) {
    .border-responsive {
        @include border-width(q(2));
    }
    // Add more responsive styles as needed
}