@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(skeleton) {
  @include when(animation) {
    @include be(skeleton, line-item) {
      background: linear-gradient(
        90deg,
        getCssVar("color", "fill-2") 25%,
        getCssVar("color", "fill-3") 37%,
        getCssVar("color", "fill-2") 63%
      );
      background-size: 400% 100%;
      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
    }
    @include be(skeleton, shape) {
      background: linear-gradient(
        90deg,
        getCssVar("color", "fill-2") 25%,
        getCssVar("color", "fill-3") 37%,
        getCssVar("color", "fill-2") 63%
      );
      background-size: 400% 100%;
      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
    }
  }
  @include e(line) {
    display: flex;
    flex-direction: column;
  }
  @include e(line-item) {
    height: 20px;
    background-color: getCssVar("color", "fill-2");
  }
  @include e(shape) {
    background-color: getCssVar("color", "fill-2");
    @include when(circle) {
      border-radius: getCssVar("radius", "circle");
    }
  }
  @each $size in $size-list {
    @include m($size) {
      height: getCssVar("size", $size);
      width: getCssVar("size", $size);
      border-radius: getCssVar("radius", $size);
    }
  }

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