// =============================================================================
// Comments Press Zone - Admin SCSS Mixins
// =============================================================================
// Reusable mixins for responsive design, accessibility, and RTL.
// All mixins follow WordPress.org naming requirements (4+ char prefix).
// =============================================================================

// Variables are imported in main.scss to avoid conflicts

@use 'sass:color';
@use 'variables' as *;

// -----------------------------------------------------------------------------
// Legacy Sass Helpers
// -----------------------------------------------------------------------------
// Dart Sass is deprecating the global `lighten()` / `darken()` helpers.
// Our codebase still uses them in legacy admin styles; define compatible
// equivalents so we can upgrade incrementally without noisy build warnings.

@function lighten($value, $amount) {
    @return color.adjust($value, $lightness: $amount);
}

@function darken($value, $amount) {
    @return color.adjust($value, $lightness: -$amount);
}

// -----------------------------------------------------------------------------
// Responsive Design Mixins
// -----------------------------------------------------------------------------

/// Mobile-first responsive breakpoint mixin
/// @param {String} $breakpoint - Breakpoint name (sm, md, lg)
/// @content Styles to apply at specified breakpoint
/// @example
///   .presszone-international-card {
///     width: 100%;
///     @include breakpoint(md) {
///       width: 50%;
///     }
///   }
@mixin breakpoint($breakpoint) {
    @if $breakpoint =='sm' {
        @media (min-width: $presszone-international-breakpoint-sm) {
            @content;
        }
    }

    @else if $breakpoint =='md' {
        @media (min-width: $presszone-international-breakpoint-md) {
            @content;
        }
    }

    @else if $breakpoint =='lg' {
        @media (min-width: $presszone-international-breakpoint-lg) {
            @content;
        }
    }
}

/// Responsive breakpoint mixin (alias for breakpoint)
/// @param {String} $size - Breakpoint name (sm, md, lg)
/// @content Styles to apply at specified breakpoint
/// @example
///   .presszone-international-card {
///     width: 100%;
///     @include respond-to(md) {
///       width: 50%;
///     }
///   }
@mixin respond-to($size) {
    @include breakpoint($size) {
        @content;
    }
}

// -----------------------------------------------------------------------------
// Accessibility Mixins
// -----------------------------------------------------------------------------

/// Focus state mixin for keyboard accessibility
/// @content Styles to apply on focus
/// @example
///   .presszone-international-btn {
///     @include focus-state {
///       outline: 2px solid $presszone-international-primary;
///     }
///   }
@mixin focus-state {
    &:focus-visible {
        @content;
    }
}

/// Reduced motion mixin for accessibility
/// @content Styles to apply when user prefers reduced motion
/// @example
///   .presszone-international-modal {
///     @include reduced-motion {
///       transition: none;
///     }
///   }
@mixin reduced-motion {
    @media (prefers-reduced-motion: reduce) {
        @content;
    }
}

// -----------------------------------------------------------------------------
// RTL Support Mixins
// -----------------------------------------------------------------------------

/// RTL direction mixin
/// @content Styles to apply in RTL context
/// @example
///   .presszone-international-dialog {
///     @include rtl {
///       margin-inline-start: 0;
///       margin-inline-end: 20px;
///     }
///   }
@mixin rtl {

    [dir="rtl"] &,
    :root[dir="rtl"] & {
        @content;
    }
}

// -----------------------------------------------------------------------------
// Utility Mixins
// -----------------------------------------------------------------------------

/// Box shadow mixin with configurable blur and spread
/// @param {Number} $blur - Blur radius
/// @param {Number} $spread - Spread radius
/// @param {Color} $color - Shadow color
/// @content Optional additional shadow properties
/// @example
///   .presszone-international-card {
///     @include box-shadow(4px, 12px, rgba(0, 0, 0, 0.1)) {
///       inset: 0 1px 0 rgba(255, 255, 255, 0.1);
///     }
///   }
@mixin box-shadow($blur, $spread, $color) {
    box-shadow: 0 $presszone-international-shadow-offset-y $blur $spread $color;
    @content;
}

// -----------------------------------------------------------------------------
// Color Mixins
// -----------------------------------------------------------------------------

/// Primary color mixin
/// @content Styles to apply with primary color
/// @example
///   .presszone-international-btn {
///     @include primary-color {
///       color: $presszone-international-primary;
///     }
///   }
@mixin primary-color {
    color: $presszone-international-primary;
    @content;
}

/// Accent color mixin
/// @content Styles to apply with accent color
/// @example
///   .presszone-international-badge {
///     @include accent-color {
///       background: $presszone-international-accent;
///     }
///   }
@mixin accent-color {
    color: $presszone-international-accent;
    @content;
}

// -----------------------------------------------------------------------------
// Spacing Mixins
// -----------------------------------------------------------------------------

/// Margin spacing mixin
/// @param {String} $spacing - Spacing variable name
/// @example
///   .presszone-international-card {
///     @include margin-spacing(sm);
///   }
@mixin margin-spacing($spacing) {
    margin: var(--presszone-international-#{$spacing}-spacing);
}

/// Padding spacing mixin
/// @param {String} $spacing - Spacing variable name
/// @example
///   .presszone-international-card {
///     @include padding-spacing(md);
///   }
@mixin padding-spacing($spacing) {
    padding: var(--presszone-international-#{$spacing}-spacing);
}

// -----------------------------------------------------------------------------
// Typography Mixins
// -----------------------------------------------------------------------------

/// Font size mixin
/// @param {String} $size - Font size variable name
/// @example
///   .presszone-international-title {
///     @include font-size(lg);
///   }
@mixin font-size($size) {
    font-size: var(--presszone-international-#{$size}-font-size);
}

/// Line height mixin
/// @param {String} $size - Line height variable name
/// @example
///   .presszone-international-text {
///     @include line-height(base);
///   }
@mixin line-height($size) {
    line-height: var(--presszone-international-#{$size}-line-height);
}

// -----------------------------------------------------------------------------
// Border Mixins
// -----------------------------------------------------------------------------

/// Border width mixin
/// @param {String} $width - Border width variable name
/// @example
///   .presszone-international-card {
///     @include border-width(lg);
///   }
@mixin border-width($width) {
    border-width: var(--presszone-international-#{$width}-border-width);
}

// -----------------------------------------------------------------------------
// Animation Mixins
// -----------------------------------------------------------------------------

/// Animation duration mixin
/// @param {String} $duration - Duration variable name
/// @example
///   .presszone-international-modal {
///     @include animation-duration(normal);
///   }
@mixin animation-duration($duration) {
    transition-duration: var(--presszone-international-#{$duration}-duration);
}