/**
 * Shared Animation System
 *
 * Consolidated keyframes, timing variables, and animation utilities.
 * Used by components throughout the admin app.
 *
 * @package ForumPressZone
 */

@use 'abstracts/variables' as *;

/* ============================================
   Shared Slide-In Keyframes
   ============================================ */

@keyframes presszoneForumSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszoneForumSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszoneForumSlideInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes presszoneForumSlideInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Shared Fade Keyframes
   ============================================ */

@keyframes presszoneForumFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes presszoneForumFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ============================================
   Shared Scale/Pop Keyframes
   ============================================ */

@keyframes presszoneForumPopIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   Shared Pulse Keyframes
   ============================================ */

@keyframes presszoneForumPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ============================================
   AnimatedItem Component Classes
   ============================================ */

.presszone-forum-animated-item {
    animation-fill-mode: backwards;
}

.presszone-forum-animated-item--slide-left {
    animation: presszoneForumSlideInLeft $presszone-forum-duration-normal $presszone-forum-ease-smooth backwards;
}

.presszone-forum-animated-item--slide-right {
    animation: presszoneForumSlideInRight $presszone-forum-duration-normal $presszone-forum-ease-smooth backwards;
}

.presszone-forum-animated-item--slide-up {
    animation: presszoneForumSlideInUp $presszone-forum-duration-normal $presszone-forum-ease-smooth backwards;
}

.presszone-forum-animated-item--slide-down {
    animation: presszoneForumSlideInDown $presszone-forum-duration-normal $presszone-forum-ease-smooth backwards;
}

.presszone-forum-animated-item--fade {
    animation: presszoneForumFadeIn $presszone-forum-duration-normal $presszone-forum-ease-smooth backwards;
}

.presszone-forum-animated-item--pop {
    animation: presszoneForumPopIn $presszone-forum-duration-normal $presszone-forum-ease-spring backwards;
}

/* ============================================
   Spinner Component Classes
   ============================================ */

.presszone-forum-spinner-component {
    display: inline-block;
    border-style: solid;
    border-color: currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: presszoneForumSpin $presszone-forum-spinner-duration linear infinite;
}

.presszone-forum-spinner-component--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.presszone-forum-spinner-component--md {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.presszone-forum-spinner-component--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* ============================================
   StatusFeedback Component Classes
   ============================================ */

.presszone-forum-status-feedback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.presszone-forum-status-feedback--success {
    color: $presszone-forum-success;
    animation: presszoneForumPulse 0.3s $presszone-forum-ease-spring;
}

.presszone-forum-status-feedback--error {
    color: $presszone-forum-error;
    animation: presszoneForumPulse 0.3s $presszone-forum-ease-spring;
}

.presszone-forum-status-feedback--warning {
    color: $presszone-forum-warning;
    animation: presszoneForumPulse 0.3s $presszone-forum-ease-spring;
}

// Dark mode overrides
body.dark-mode {
    .presszone-forum-status-feedback--success {
        color: $presszone-forum-success-dark;
    }

    .presszone-forum-status-feedback--error {
        color: $presszone-forum-error-dark;
    }

    .presszone-forum-status-feedback--warning {
        color: $presszone-forum-warning-dark;
    }
}

/* ============================================
   Toast Component Classes
   ============================================ */

@keyframes presszoneForumToastIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes presszoneForumToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

.presszone-forum-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 90vw;
}

.presszone-forum-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: $presszone-forum-surface;
    border-radius: $presszone-forum-radius-lg;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid $presszone-forum-border;
    animation: presszoneForumToastIn $presszone-forum-duration-normal $presszone-forum-ease-spring;
    pointer-events: auto;
    min-width: 280px;
    max-width: 400px;
}

.presszone-forum-toast--success {
    border-left: 4px solid $presszone-forum-success;
}

.presszone-forum-toast--error {
    border-left: 4px solid $presszone-forum-error;
}

.presszone-forum-toast--warning {
    border-left: 4px solid $presszone-forum-warning;
}

.presszone-forum-toast--info {
    border-left: 4px solid $presszone-forum-primary;
}

.presszone-forum-toast--hiding {
    animation: presszoneForumToastOut $presszone-forum-duration-fast $presszone-forum-ease-smooth forwards;
}

.presszone-forum-toast__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.presszone-forum-toast__message {
    font-size: 14px;
    color: $presszone-forum-text;
    font-weight: 500;
    flex: 1;
    line-height: 1.4;
}

.presszone-forum-toast__dismiss {
    background: none;
    border: none;
    font-size: 20px;
    color: $presszone-forum-text-muted;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity $presszone-forum-duration-fast $presszone-forum-ease-smooth;
}

.presszone-forum-toast__dismiss:hover {
    opacity: 1;
}

/* Dark mode support */
body.dark-mode .presszone-forum-toast {
    background: $presszone-forum-surface-3-dark;
    border-color: $presszone-forum-border-dark;
    box-shadow: $presszone-forum-shadow-dark;
}

body.dark-mode .presszone-forum-toast--success {
    border-left-color: $presszone-forum-success-dark;
}

body.dark-mode .presszone-forum-toast--error {
    border-left-color: $presszone-forum-error-dark;
}

body.dark-mode .presszone-forum-toast--warning {
    border-left-color: $presszone-forum-warning-dark;
}

body.dark-mode .presszone-forum-toast--info {
    border-left-color: $presszone-forum-primary-dark;
}

body.dark-mode .presszone-forum-toast__message {
    color: $presszone-forum-text-dark;
}

body.dark-mode .presszone-forum-toast__dismiss {
    color: $presszone-forum-text-muted-dark;
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .presszone-forum-animated-item--slide-left,
    .presszone-forum-animated-item--slide-right,
    .presszone-forum-animated-item--slide-up,
    .presszone-forum-animated-item--slide-down,
    .presszone-forum-animated-item--fade,
    .presszone-forum-animated-item--pop,
    .presszone-forum-spinner-component,
    .presszone-forum-status-feedback--success,
    .presszone-forum-status-feedback--error,
    .presszone-forum-status-feedback--warning,
    .presszone-forum-toast,
    .presszone-forum-toast--hiding {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}