@use 'sass:math';
@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;
#{getClassName((skeleton))} {
  font-size: #{getValName((skeleton, font-size))};
}

#{getClassName((skeleton, item))} {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #{getValName((skeleton-item, color))};
  width: #{getValName((skeleton-item, width))};
  height: #{getValName((skeleton-item, height))};
  border-radius: #{getValName((skeleton-item, border-radius))};
  background-color: #{getValName((skeleton-item, background-color))};
  + #{getClassName((skeleton, item))} {
    margin-top: #{getValName((skeleton-item, gap))};
  }
  .is-animated & {
    background: linear-gradient(90deg,#{getValName((skeleton-item, background-color))} 25%,#{getValName((skeleton-item, background-color-2))} 37%,#{getValName((skeleton-item, background-color))} 63%);
    background-size: 400% 100%;
    animation: os-skeleton-loading 1.4s ease infinite;
  }
  .is-circle & {
    width: #{getValName((skeleton-item, circle-size))} !important;
    padding-top: #{getValName((skeleton-item, circle-size))};
    // padding-left: #{getValName((skeleton-item, circle-size))};
    border-radius: 50%;
  }
  > i {
    font-size: #{getValName((skeleton-item, icon-size))};
  }
}
@keyframes os-skeleton-loading {
  0% {
      background-position: 100% 50%
  }

  to {
      background-position: 0 50%
  }
}

#{getClassName((skeleton, item))}:last-child {
  width: #{getValName((skeleton-item, last-width))};
}

#{getClassName((skeleton, item))}:first-child {
  width: #{getValName((skeleton-item, first-width))};
}

#{getClassName((skeleton))} {
  #{joinValName((skeleton-item, circle-size))}: 40%;
  #{joinValName((skeleton-item, width))}: 100%;
  #{joinValName((skeleton-item, height))}: 1.2em;
  @include set-css-val(
    skeleton,
    (
      'font-size': (heading8)
    )
  );
  @include set-css-val(
    skeleton-item,
    (
      'border-radius': (border, radius, base),
      'background-color': (color, neutral, 1),
      'background-color-2': (color, neutral, 2),
      'gap': (space, base),
      'color': (color, neutral, 3),
      'icon-size': (heading4)
    )
  );
}

#{getClassName((skeleton, large))} {
  @include set-css-val(
    skeleton,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((skeleton, mini))} {
  @include set-css-val(
    skeleton,
    (
      'font-size': (heading9)
    )
  );
}