// =============================================================================
// 31-modules / placeholder / mixins
// =============================================================================

@use "sass:map";
@use "./placeholder.config" as config;

@mixin ss-placeholder {
    display: inline-block;
    min-height: map.get(config.$placeholder-config, "height-md");
    vertical-align: middle;
    cursor: wait;
    background-color: currentColor;
    opacity: map.get(config.$placeholder-config, "opacity");
}

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

@mixin ss-placeholder-wave {
    mask-image: linear-gradient(
        130deg,
        rgba(0, 0, 0, 0.55) 55%,
        rgba(0, 0, 0, 0.85) 75%,
        rgba(0, 0, 0, 0.55) 95%
    );
    mask-size: 200% 100%;
    animation: ss-placeholder-wave 2s linear infinite;
}