@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/motion' as motion;
@use './skeleton' as *;

$animation-duration: motion.duration(moderate) !default;
$animation-front: palette.semantic-variable(background, neutral-faint) !default;
$animation-back: palette.semantic-variable(background, neutral-subtle) !default;

.#{$prefix} {
  width: 100%;
  height: 100%;

  &--strip {
    @each $type in typography.$semantic-semantic-types {
      &--#{$type} {
        height: typography.semantic-prop($type, line-height);
        display: flex;
        align-items: center;

        > span {
          height: typography.semantic-prop($type, font-size);
          width: 100%;
        }
      }
    }
  }

  &--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    height: auto;
  }
}

.#{$prefix}--bg {
  @include motion.pattern(skeleton-loading, animation);

  animation-name: active-animation;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, #{$animation-back 25%}, #{$animation-front}, #{$animation-back} 75%);
  background-size: 400% 100%;
  box-sizing: border-box;

  @keyframes active-animation {
    0% { background-position: 100%; }
    100% { background-position: 0%; }
  }
}