// ============================================================================
// Components | Placeholder
// ============================================================================

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

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

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

// Placeholder variables
$placeholder-opacity-max: 0.5 !default;

// ============================================================================
// Placeholder Mixins
// ============================================================================

/// Base styling for placeholders.
/// Placeholders provide a temporary visual indicator while content is loading.
/// @group Placeholder
@mixin placeholder--base {
    display: inline-block;
    min-height: q(16);
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: $placeholder-opacity-max;

    /// Specific styles for buttons with placeholder content.
    &.button::before {
        display: inline-block;
        content: "";
    }
}

/// Placeholder size modifier - extra small
/// @group Placeholder
@mixin placeholder--xs {
    min-height: q(10);
}

/// Placeholder size modifier - small
/// @group Placeholder
@mixin placeholder--sm {
    min-height: q(12);
}

/// Placeholder size modifier - large
/// @group Placeholder
@mixin placeholder--lg {
    min-height: q(32);
}