@blockBgColor: #fcfcfc;
// @blockBgColor:rgba(255,255,255,.87);
@lightColor: rgba(0, 0, 0, 0.1);
@darkColor: rgba(0, 0, 0, 0.2);
@deepdarkColor: rgba(0, 0, 0, 0.4);

.sk-container {
  background-color: @blockBgColor;
  padding: 15px 20px;
}
.chart-container {
  background-color: @blockBgColor;
  padding: 15px 20px;
  &::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 25px;
    width: 120px;
    height: 20px;
    border-radius: 2px;
    background-color: @darkColor;
  }
}

.skeleton-card {
  position: relative;
  height: 120px;
  background-color: @blockBgColor;
  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 100%;
    .img {
      width: 60%;
      height: 60%;
      border-radius: 50%;
      background-color: @darkColor;
      margin: 20% auto;
    }
  }
  .right {
    margin-left: 120px;
    padding: 5px 10px;
    top: 20%;
    position: relative;
    h4,
    p {
      margin: 0;
      border-radius: 4px;
      background-color: @lightColor;
    }
    h4 {
      font-size: 2.2rem;
      height: 24px;
      width: 42%;
      margin-top: 4px;
    }
    p {
      font-size: 1.6rem;
      height: 18px;
      width: 90%;
      margin-top: 12px;
    }
  }
  .loading-wave;
}
.sk-list {
  background-color: @blockBgColor;
  padding: 15px 20px;
  height: 280px;
  .item {
    position: relative;
    border-radius: 2px;
    height: 20px;
    width: calc(100% - 140px);
    background-color: @lightColor;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: -120px;
      border-radius: 2px;
      height: 20px;
      width: 100px;
      background-color: @darkColor;
    }
    & + .item {
      margin-top: 18px;
    }
  }
  .loading-wave;
}
.sk-table {
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  background-color: @blockBgColor;
  height: 250px;
  table {
    width: 100%;
    th {
      padding: 15px 4%;
      background-color: rgba(0, 0, 0, 0.06);
      span {
        display: block;
        height: 18px;
        border-radius: 2px;
        background-color: @deepdarkColor;
      }
    }
    td {
      padding: 12px 3%;
      span {
        display: block;
        height: 16px;
        border-radius: 2px;
        background-color: @darkColor;
      }
    }
    tr {
      transition: background-color 0.3s;
      &:hover {
        background-color: rgba(0, 0, 0, 0.02);
      }
      &:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.04);
      }
    }
  }
  .loading-wave;
}
.sk-piechart {
  margin: 25px auto;
  width: 200px;
  height: 200px;
  // background:conic-gradient(deeppink 0 30%,yellowgreen 30% 70%,teal 70% 100%);
  background: conic-gradient(rgba(0, 0, 0, 0.2) 0 30%, rgba(0, 0, 0, 0.3) 30% 45%, rgba(0, 0, 0, 0.1) 45% 64%, rgba(0, 0, 0, 0.4) 64% 100%);
  border-radius: 50%;
  .loading-wave;
}
.sk-barchart {
  --space: 25px;
  --itemWidth: 25px;
  --itemHeight: 60%;
  --bgColor: rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  height: 250px;
  width: 575px;
  margin: 0 auto;
  position: relative;
  .item {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-left: var(--space);
    width: var(--itemWidth);
    height: var(--itemHeight);
    background-color: var(--bgColor);
  }
  .loading-wave;
}

.progress {
  --p: 60%;
  --h: 20px;
  --br: 4px;
  --c: rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: var(--br);
  height: var(--h);
  background-color: rgba(0, 0, 0, 0.15);
  &::before,
  &::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--p);
    border-radius: var(--br);
    background-color: var(--c);
    transition: width 1.5s ease-in;
  }
  &::after {
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: progress-wave 2s ease-out infinite;
  }
  @keyframes progress-wave {
    0% {
      width: 0;
      opacity: 0.1;
    }
    34% {
      width: 0;
      opacity: 0.5;
    }
    100% {
      width: var(--p);
      opacity: 0;
    }
  }
  .loading-wave;
}

.loading-wave {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    opacity: 0;
    animation: wave 2s ease-out infinite;
  }
  @keyframes wave {
    0% {
      width: 0;
      opacity: 0.1;
    }
    34% {
      width: 0;
      opacity: 0.5;
    }
    100% {
      width: 100%;
      opacity: 0;
    }
  }
}
