/**
 * Author Website Templates - Responsive & Utility Mixins
 */

@use 'variables' as *;

// Responsive Breakpoint Mixins (Mobile First)
@mixin sm {
    @media (min-width: #{$awt-breakpoint-sm}) {
        @content;
    }
}

@mixin md {
    @media (min-width: #{$awt-breakpoint-md}) {
        @content;
    }
}

@mixin lg {
    @media (min-width: #{$awt-breakpoint-lg}) {
        @content;
    }
}

@mixin xl {
    @media (min-width: #{$awt-breakpoint-xl}) {
        @content;
    }
}

@mixin xxl {
    @media (min-width: #{$awt-breakpoint-2xl}) {
        @content;
    }
}

@mixin media-up($breakpoint) {
    @media (min-width: #{$breakpoint}) {
        @content;
    }
}

@mixin media-down($breakpoint) {
    @media (max-width: ($breakpoint - 0.02px)) {
        @content;
    }
}

// Scoped Container Mixin
@mixin awt-container-styles {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;

    @include sm {
        max-width: #{$awt-breakpoint-sm};
    }
    @include md {
        max-width: #{$awt-breakpoint-md};
    }
    @include lg {
        max-width: #{$awt-breakpoint-lg};
    }
    @include xl {
        max-width: #{$awt-breakpoint-xl};
    }
    @include xxl {
        max-width: #{$awt-breakpoint-2xl};
    }
}

@mixin awt-container {
    @include awt-container-styles;
}

// Accessibility & UI Utilities
@mixin focus-ring($color: $awt-color-accent, $offset: 2px) {
    outline: 2px solid transparent;
    outline-offset: #{$offset};
    box-shadow: 0 0 0 #{$offset} #fff, 0 0 0 (2px + #{$offset}) #{$color};
}

@mixin truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin line-clamp($lines: 2) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}