// ==========================================================================
// PressZone Theme - SCSS Mixins
// ==========================================================================
// Reusable mixins for common styling patterns.
// ==========================================================================

// --------------------------------------------------------------------------
// Responsive Breakpoints
// --------------------------------------------------------------------------
@mixin media-up($breakpoint) {
    @if $breakpoint == sm {
        @media (min-width: $breakpoint-sm) {
            @content;
        }
    } @else if $breakpoint == md {
        @media (min-width: $breakpoint-md) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media (min-width: $breakpoint-lg) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media (min-width: $breakpoint-xl) {
            @content;
        }
    } @else if $breakpoint == xxl {
        @media (min-width: $breakpoint-xxl) {
            @content;
        }
    }
}

@mixin media-down($breakpoint) {
    @if $breakpoint == sm {
        @media (max-width: ($breakpoint-sm - 1)) {
            @content;
        }
    } @else if $breakpoint == md {
        @media (max-width: ($breakpoint-md - 1)) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media (max-width: ($breakpoint-lg - 1)) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media (max-width: ($breakpoint-xl - 1)) {
            @content;
        }
    } @else if $breakpoint == xxl {
        @media (max-width: ($breakpoint-xxl - 1)) {
            @content;
        }
    }
}

// --------------------------------------------------------------------------
// Flexbox Utilities
// --------------------------------------------------------------------------
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@mixin flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

// --------------------------------------------------------------------------
// Typography
// --------------------------------------------------------------------------
@mixin heading-style {
    font-family: $font-family-heading;
    font-weight: $font-weight-bold;
    line-height: $line-height-heading;
}

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

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

// --------------------------------------------------------------------------
// Visual Effects
// --------------------------------------------------------------------------
@mixin glassmorphism($opacity: 0.1) {
    background: rgba(255, 255, 255, $opacity);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@mixin gradient-text($gradient) {
    background: $gradient;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@mixin hover-lift {
    transition: transform $transition-base, box-shadow $transition-base;

    &:hover {
        transform: translateY(-4px);
        box-shadow: $shadow-lg;
    }
}

@mixin hover-scale($scale: 1.02) {
    transition: transform $transition-base;

    &:hover {
        transform: scale($scale);
    }
}

// --------------------------------------------------------------------------
// Button Styles
// --------------------------------------------------------------------------
@mixin button-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: $font-family-base;
    font-weight: $font-weight-medium;
    font-size: $font-size-base;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    transition: all $transition-base;

    &:focus {
        outline: 2px solid $color-primary;
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}

@mixin button-primary {
    @include button-base;
    background: $color-primary;
    color: $dark-bg-primary; // Dark text on light primary button

    &:hover:not(:disabled) {
        background: $color-primary-hover;
    }
}

// --------------------------------------------------------------------------
// Card Styles
// --------------------------------------------------------------------------
@mixin card-base {
    border-radius: $border-radius-lg;
    overflow: hidden;
    transition: all $transition-base;
}

// --------------------------------------------------------------------------
// Accessibility
// --------------------------------------------------------------------------
@mixin focus-ring {
    &:focus-visible {
        outline: 2px solid $color-primary;
        outline-offset: 2px;
    }
}

@mixin sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

// --------------------------------------------------------------------------
// RTL Support
// --------------------------------------------------------------------------
@mixin rtl {
    @if & {
        // Nested inside a selector
        [dir="rtl"] &,
        .rtl & {
            @content;
        }
    } @else {
        // At root level
        [dir="rtl"],
        .rtl {
            @content;
        }
    }
}

@mixin margin-start($value) {
    margin-inline-start: $value;
}

@mixin margin-end($value) {
    margin-inline-end: $value;
}

@mixin padding-start($value) {
    padding-inline-start: $value;
}

@mixin padding-end($value) {
    padding-inline-end: $value;
}

// --------------------------------------------------------------------------
// Dark Mode Helper
// --------------------------------------------------------------------------
@mixin dark-mode {
    @if & {
        // Nested inside a selector
        .dark-mode & {
            @content;
        }
    } @else {
        // At root level
        .dark-mode {
            @content;
        }
    }
}