$name: 'ivue-skeleton';

:root {
  // size
  --#{$name}-circle-size: 40px;
  --#{$name}-square-size: 40px;
  --#{$name}-image-size: 96px;
  --#{$name}-h1-size: 20px;
  --#{$name}-h3-size: 18px;
  --#{$name}-caption-size: 12px;
  --#{$name}-button-width: 88px;
  --#{$name}-button-height: 36px;

  // color
  --#{$name}-color: #f2f2f2;
  --#{$name}-to-color: #d7d7d7;
  --#{$name}-image-color: #cccccc;
}

.#{$name} {
  width: 100%;
  display: flex;
  flex-direction: column;

  &--paragraph {
    margin-bottom: 16px;
  }

  .is-last {
    margin-bottom: 0;
  }

  &-item {
    background: var(--#{$name}-color);
    display: inline-block;
    height: 16px;
    border-radius: var(--ivue-border-radius);
    width: 100%;
    font-size: 24px;

    &--p {
      width: 100%;
    }

    &--p.is-first {
      width: 38%;
    }

    &--p.is-last {
      width: 62%;
    }

    // 圆形
    &--circle {
      border-radius: 50%;
      width: var(--#{$name}-circle-size);
      height: var(--#{$name}-circle-size);
      line-height: var(--#{$name}-circle-size);
    }

    // 正方形
    &--square {
      border-radius: var(--ivue-border-radius);
      width: var(--#{$name}-square-size);
      height: var(--#{$name}-square-size);
      line-height: var(--#{$name}-square-size);
    }

    // 正方形
    &--square {
      width: var(--#{$name}-square-size);
      height: var(--#{$name}-square-size);
      line-height: var(--#{$name}-square-size);
    }

    // image
    &--image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--#{$name}-image-size);
      height: var(--#{$name}-image-size);

      .ivue-icon {
        font-size: inherit;
        color: var(--#{$name}-image-color);
      }
    }

    // h1
    &--h1 {
      height: var(--#{$name}-h1-size);
    }

    // h3
    &--h3 {
      height: var(--#{$name}-h3-size);
    }

    // caption
    &--caption {
      height: var(--#{$name}-caption-size);
    }

    // button
    &--button {
      width: var(--#{$name}-button-width);
      height: var(--#{$name}-button-height);
    }
  }

  &.is-animated &-item {
    background: linear-gradient(
      90deg,
      var(--#{$name}-color) 25%,
      var(--#{$name}-to-color) 37%,
      var(--#{$name}-color) 63%
    );
    background-size: 400% 100%;
    animation: ivue-skeleton-animated 1.4s ease infinite;
  }

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

    to {
      background-position: 0 50%;
    }
  }
}