// ============================================================================
// Placeholder / Skeleton Loading
// Bootstrap-compatible placeholder loading animations
// ============================================================================

@use "../../../dev" as *;

// ============================================================================
// Mixins
// ============================================================================

// Base placeholder
@mixin placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: 0.5;

    // Size variants
    &--xs {
        min-height: 0.6em;
    }

    &--sm {
        min-height: 0.8em;
    }

    &--lg {
        min-height: 1.2em;
    }
}

// Placeholder width utilities
@mixin placeholder--w-25 {
    width: 25%;
}

@mixin placeholder--w-50 {
    width: 50%;
}

@mixin placeholder--w-75 {
    width: 75%;
}

@mixin placeholder--w-100 {
    width: 100%;
}

// Glow animation
@mixin placeholder--glow {
    .placeholder {
        animation: placeholder-glow 2s ease-in-out infinite;
    }
}

@keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

// Wave animation
@mixin placeholder--wave {
    mask-image: linear-gradient(
        130deg,
        #000 55%,
        rgba(0, 0, 0, 0.8) 75%,
        #000 95%
    );
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
    100% {
        mask-position: -200% 0%;
    }
}

// Placeholder button
@mixin placeholder--button {
    pointer-events: none;

    &::before {
        display: inline-block;
        content: "";
    }
}

// Color variants
@mixin placeholder--primary {
    background-color: var(--color_accent_primary);
}

@mixin placeholder--secondary {
    background-color: var(--color_text_secondary);
}

@mixin placeholder--success {
    background-color: var(--color_log_success);
}

@mixin placeholder--danger {
    background-color: var(--color_log_error);
}

@mixin placeholder--warning {
    background-color: var(--color_log_warning);
}

@mixin placeholder--info {
    background-color: var(--color_log_info);
}

@mixin placeholder--light {
    background-color: var(--color_fill_02);
}

@mixin placeholder--dark {
    background-color: var(--color_fill_04);
}