@use "../../../1-settings/color-swatches";
@use "../../../1-settings/class-vars";
@use "../../../1-settings/font-stuff";
@use "../../../7-utilities/animation";

#{class-vars.$base-class} {
  .skeleton {
    animation: skeleton 2s ease-in-out .5s infinite;
    background-color: var(--gray-3-1-contrast);
    border-radius: var(--radius-small1x);

    &--rectangle {
      min-width: calc(2 * var(--spacing-6xl));
      min-height: var(--spacing-4xl);
    }

    &--circle {
      min-height: var(--spacing-4xl);
      min-width: var(--spacing-4xl);
      border-radius: var(--radius-circle);
    }

    &--line {
      min-width: calc(2 * var(--spacing-6xl));
      min-height: var(--spacing-l);
    }
  }
}