@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;


@include b(skeleton) {
  box-sizing: border-box;

  @include e(row) {
    justify-content: space-between;
    margin-bottom: $hy-border-margin-padding-base;
    display: flex;
    align-items: center;

    &:only-child,
    &:last-child {
      margin-bottom: 0;
    }
  }
  @include e(col) {
    border-radius: $hy-border-radius-sm;
    background-color: $hy-background--skeleton;
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child:last-child,
    &:last-child {
      margin-right: 0;
    }
  }
  @include m(type) {
    &-text {
      width: 100%;
      height: 20px;
      border-radius: $hy-border-radius-sm;
    }

    &-rect {
      width: 100%;
      height: 20px;
      border-radius: $hy-border-radius-base;
    }

    &-circle {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: $hy-border-radius-circle;
    }
  }
  @include m(animation) {
    &-gradient {
      position: relative;
      overflow-x: hidden;

      &::after {
        content: ' ';
        position: absolute;
        animation: wd-skeleton-gradient 1.5s linear 2s infinite;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0));
        inset: 0;
      }
    }

    &-flashed {
      animation: wd-skeleton-flashed 2s linear 2s infinite;
    }
  }

  @keyframes wd-skeleton-gradient {
    0% {
      transform: translateX(-100%) skewX(-15deg);
    }
    100% {
      transform: translateX(100%) skewX(-15deg);
    }
  }
  @keyframes wd-skeleton-flashed {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
      background-color: rgba(230, 230, 230, 0.3);
    }
    100% {
      opacity: 1;
    }
  }
}