// Copyright IBM Corp. 2025
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.

$css--plex: true !default;

@use '@carbon/styles/scss/reset';
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/ibm-products-styles/scss/config';

$prefix: config.$pkg-prefix;
$skeleton-block-class: #{$prefix}--big-number-skeleton;

:host(#{$prefix}-big-number-skeleton) {
  .#{$skeleton-block-class} {
    inline-size: $spacing-10;
  }

  .#{$skeleton-block-class}--lg {
    inline-size: $spacing-11;
  }

  .#{$skeleton-block-class}--xl {
    inline-size: $spacing-12;
  }

  .#{$skeleton-block-class}__label {
    block-size: $spacing-04;
    inline-size: 70%;
    margin-block: 0 $spacing-03;
  }

  .#{$skeleton-block-class}__value::part(placeholder) {
    margin: 0;
    block-size: $spacing-08;
    inline-size: 100%;
  }

  .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
    .#{$skeleton-block-class}__label {
    margin-block: 0 $spacing-04;
  }

  .#{$skeleton-block-class}.#{$skeleton-block-class}--lg
    .#{$skeleton-block-class}__value::part(placeholder) {
    block-size: $spacing-09;
  }

  .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
    .#{$skeleton-block-class}__label {
    margin-block: 0 $spacing-05;
  }

  .#{$skeleton-block-class}.#{$skeleton-block-class}--xl
    .#{$skeleton-block-class}__value::part(placeholder) {
    block-size: $spacing-10;
  }
}