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

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

// -----------------------------------------------------------------------------
// Dark Mode Mixins
// -----------------------------------------------------------------------------

/// Dark mode detection via system preference (prefers-color-scheme media query)
/// @content Styles to apply when system dark mode is enabled
/// @example
///   .presszone-comments-card {
///     background: #ffffff;
///     @include dark-mode {
///       background: #1e1f20;
///     }
///   }
@mixin dark-mode {
    @media (prefers-color-scheme: dark) {
        @content;
    }
}

/// Dark mode detection via class (for forced dark mode)
/// @content Styles to apply when dark mode class is present
/// @example
///   .presszone-comments-card {
///     background: #ffffff;
///     @include dark-mode-class {
///       background: #1e1f20;
///     }
///   }
@mixin dark-mode-class {

    html.presszone-comments-dark &,
    body.presszone-comments-dark &,
    .presszone-comments-dark & {
        @content;
    }
}

// -----------------------------------------------------------------------------
// 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-comments-card {
///     width: 100%;
///     @include breakpoint(md) {
///       width: 50%;
///     }
///   }
@mixin breakpoint($breakpoint) {
    @if $breakpoint =='sm' {
        @media (min-width: $presszone-comments-breakpoint-sm) {
            @content;
        }
    }

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

    @else if $breakpoint =='lg' {
        @media (min-width: $presszone-comments-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-comments-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-comments-btn {
///     @include focus-state {
///       outline: 2px solid $presszone-comments-primary;
///     }
///   }
@mixin focus-state {
    &:focus-visible {
        @content;
    }
}

/// Reduced motion mixin for accessibility
/// @content Styles to apply when user prefers reduced motion
/// @example
///   .presszone-comments-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-comments-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-comments-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-comments-shadow-offset-y $blur $spread $color;
    @content;
}

// -----------------------------------------------------------------------------
// Theme Mixins
// -----------------------------------------------------------------------------

/// Theme context mixin
/// @param {String} $theme - Theme name (light, dark, inherit)
/// @content Styles to apply in specified theme context
/// @example
///   .presszone-comments-card {
///     @include theme(light) {
///       background: $presszone-comments-bg-primary;
///     }
///     @include theme(dark) {
///       background: $presszone-comments-dark-bg-primary;
///     }
///   }
@mixin theme($theme) {
    @if $theme =='light' {

        .light-mode &,
        :root:not(.dark-mode):not(.inherit-mode) & {
            @content;
        }
    }

    @else if $theme =='dark' {

        .dark-mode &,
        :root.dark-mode:not(.inherit-mode) & {
            @content;
        }
    }

    @else if $theme =='inherit' {

        .inherit-mode &,
        :root.inherit-mode & {
            @content;
        }
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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