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

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

@use "../head_layout" as *;

@use "../soul_type" as *;

/// Base styling for placeholders.
/// Placeholders provide a temporary visual indicator while content is loading.
/// @group Placeholder
.placeholder {
    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.
    &.btn::before {
        display: inline-block;
        content: "";
    }
}

/// Placeholder size modifiers.
/// These classes adjust the minimum height of the placeholder for different use cases.
/// @group Placeholder
/// @modifier .placeholder-xs Extra small placeholder with a minimum height of q(10).
.placeholder--xs {
    min-height: q(10);
}

/// @modifier .placeholder-sm Small placeholder with a minimum height of q(12).
.placeholder--sm {
    min-height: q(12);
}

/// @modifier .placeholder-lg Large placeholder with a minimum height of 1.q(32).
.placeholder--lg {
    min-height: q(32);
}