.skeleton {
  --lines: 1; // lines count
  --l-h: 20px; // line height
  --l-gap: 10px; // lines gap
  --g-gap: 15px; // group gap
  --c-w: 300px; // container width
  --c-p: 10px; // container padding
  --bg: #e2e1eb; // shapes background
  --c-bg: transparent; // container background
  --shine: rgba(255, 255, 255, 0.2);
  --t: 2s;
  --c-s: 40px; // circle-size
  --c-pos: center; // circle-position
  --rect-h: 80px;
  padding: var(--c-p);
  width: var(--c-w);
  position: relative;
  background: var(--c-bg);
  box-sizing: border-box !important;
  --ln: linear-gradient(#000, #000);
  --circle: radial-gradient(calc(var(--c-s) / 2) calc(var(--c-s) / 2) at 50% 50%, #000 98%, transparent 100%);
  --m: unset;
  --m-r: inherit;

  &::before,
  &::after {
    content: '';
    position: absolute;
    left: var(--c-p);
    top: var(--c-p);
    width: calc(100% - calc(var(--c-p) * 2));
    height: calc(100% - calc(var(--c-p) * 2));
    -webkit-mask: var(--m);
    mask: var(--m);
    -webkit-mask-repeat: var(--m-r);
    mask-repeat: var(--m-r);
  }

  &::before {
    background: var(--bg);
  }

  &::after {
    background: linear-gradient(to right, transparent 0 20%, var(--shine), transparent 80% 100%) -300% 0/80% 100% no-repeat;
    animation: s var(--t) linear infinite;

    @keyframes s {
      to {
        background-position: 600% 0;
      }
    }
  }

  &.no-animate {
    &::after {
      animation: none;
    }
  }

  &#{&}-line {
    height: calc((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--c-p) * 2);
    --m: linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 0/100% calc(var(--l-h) + var(--l-gap));
  }

  &#{&}-circle {
    width: calc(var(--c-s) + var(--c-p) * 2);
    height: calc(var(--c-s) + var(--c-p) * 2);
    --m: var(--circle) 0 50% / var(--c-s) var(--c-s) no-repeat;
  }

  &#{&}-circle-line {
    height: calc(var(--c-s) + var(--c-p) * 2);
    --m: var(--circle) 0 50% / calc(var(--c-s)) calc(var(--c-s)),
      var(--ln) calc(var(--c-s) + var(--g-gap)) var(--c-pos)/100% var(--l-h);
    --m-r: no-repeat;
  }

  &#{&}-circle-multi-line {
    height: calc((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--c-p) * 2);
    --m: var(--circle) 0 var(--c-pos) / calc(var(--c-s)) calc(var(--c-s)),
      linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) calc(var(--c-s) + var(--g-gap)) 0%/100% calc(var(--l-h) + var(--l-gap));
    --m-r: no-repeat, no-repeat repeat;

    &.adapt-to-circle {
      height: calc(var(--c-s) + var(--c-p) * 2);
      --m-r: no-repeat, no-repeat space;
    }
  }

  &#{&}-rect {
    height: calc(((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1)) + var(--g-gap)) * clamp(0, var(--lines), 1) + var(--rect-h) + var(--c-p) * 2);

    --m: var(--ln) 0 0/100% var(--rect-h),
      repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--rect-h) + var(--g-gap)) / 100% calc(100% - (var(--rect-h) + var(--g-gap)));
    --m-r: no-repeat;
  }

  &#{&}-chart-line {
    --chart-btm: 40px;
    --chart-h: 200px;
    height: calc(var(--chart-h) + var(--c-p) * 2);
    --m: var(--ln) 0 100% / 100% var(--chart-btm),
      linear-gradient(to left bottom, transparent 0 49.5%, #000 50% 100%) left 0 bottom var(--chart-btm) / calc((var(--c-w) / 10) * 2) calc(var(--chart-h) / 2),
      linear-gradient(to right bottom, transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 2) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)),
      linear-gradient(to left bottom, transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 5) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 3) calc(var(--chart-h) - var(--chart-btm)),
      linear-gradient(to right bottom, transparent 0 49.5%, #000 50% 100%) left calc((var(--c-w) / 10) * 8) bottom var(--chart-btm) / calc((var(--c-w) / 10) * 2.5) calc(var(--chart-h) / 2.5);
    --m-r: no-repeat;
  }

  &#{&}-chart-columns {
    --cols: 5;
    --col-w: 25px;
    --col-gap: 25px;
    --o-l: calc(var(--col-w) + var(--col-gap)); // offset-left
    --chart-h: 200px;
    height: calc(var(--chart-h) + var(--c-p) * 2);
    width: calc(((var(--cols) - 1) * var(--o-l)) + var(--col-w) + var(--c-p) * 2);

    --m: var(--ln) 0 100% / var(--col-w) calc((var(--chart-h) / 10) * 4),
      var(--ln) calc(var(--o-l)) 100% / var(--col-w) calc((var(--chart-h) / 10) * 3),
      var(--ln) calc(var(--o-l) * 2) 100% / var(--col-w) calc((var(--chart-h) / 10) * 6),
      var(--ln) calc(var(--o-l) * 3) 100% / var(--col-w) calc((var(--chart-h) / 10) * 8),
      var(--ln) calc(var(--o-l) * 4) 100% / var(--col-w) calc((var(--chart-h) / 10) * 2),
      var(--ln) calc(var(--o-l) * 5) 100% / var(--col-w) calc((var(--chart-h) / 10) * 5),
      var(--ln) calc(var(--o-l) * 6) 100% / var(--col-w) calc((var(--chart-h) / 10) * 4),
      var(--ln) calc(var(--o-l) * 7) 100% / var(--col-w) calc((var(--chart-h) / 10) * 9),
      var(--ln) calc(var(--o-l) * 8) 100% / var(--col-w) calc((var(--chart-h) / 10) * 2),
      var(--ln) calc(var(--o-l) * 9) 100% / var(--col-w) calc((var(--chart-h) / 10) * 7);
    --m-r: no-repeat;
  }

  &#{&}-card-1 {
    --card-h: 150px;
    --g-gap: 30px;
    --c-s: 30px;
    --c-w-o: (var(--c-w) - var(--c-p) * 2);
    height: calc(var(--card-h) + var(--c-p) * 2);
    --r-x: calc((var(--c-w-o) / 4) + var(--g-gap));
    --l-x: calc((var(--c-w-o) / 4) + var(--g-gap) + var(--c-s) + var(--l-gap));
    --l-w: calc((var(--c-w-o) - (var(--c-w-o) / 4 + (var(--g-gap) * 2) + (var(--l-gap) * 2) + var(--c-s) * 2)) / 2);

    --m: var(--ln) 0 0 / calc(var(--c-w-o) / 4) var(--card-h),
      var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) 0 / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 5),
      var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 3) / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),
      var(--ln) calc((var(--c-w-o) / 4) + var(--g-gap)) calc(var(--card-h) / 1.8) / calc(var(--c-w-o) - ((var(--c-w-o) / 4) + var(--g-gap))) calc(var(--card-h) / 8),
      var(--circle) var(--r-x) 100% / calc(var(--c-s)) calc(var(--c-s)),
      var(--ln) left var(--l-x) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2) / var(--l-w) calc(var(--card-h) / 8),
      var(--circle) calc(var(--l-x) + var(--l-w) + var(--g-gap)) 100% / calc(var(--c-s)) calc(var(--c-s)),
      var(--ln) left calc(var(--l-x) + var(--l-w) + var(--c-s) + var(--g-gap) + var(--l-gap)) bottom calc((var(--c-s) - (var(--card-h) / 8)) / 2) / var(--l-w) calc(var(--card-h) / 8);
    --m-r: no-repeat;
  }

  &#{&}-card-2 {
    --f-l-w: 90%;
    --f-l-h: 25px;
    --f-l-c: var(--bg);
    --s-l-w: 70%;
    --s-l-h: 20px;
    --s-l-c: var(--bg);
    --s-l-m-t: 15px;

    height: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap) + ((var(--l-h) * var(--lines)) + (var(--l-gap) * (var(--lines) - 1))) + var(--c-p) * 2);

    --top: calc(var(--f-l-h) + var(--s-l-m-t) + var(--s-l-h) + var(--g-gap));
    --m: var(--ln) 0 0/var(--f-l-w) var(--f-l-h),
      var(--ln) 0 calc(var(--f-l-h) + var(--s-l-m-t)) / var(--s-l-w) var(--s-l-h),
      var(--ln) 0 var(--top) / 100% var(--l-h),
      var(--ln) 0 calc(var(--top) + (var(--l-h) + var(--l-gap))) / 100% var(--l-h),
      var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 2)) / 80% var(--l-h),
      var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 3)) / 100% var(--l-h),
      var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 4)) / 100% var(--l-h),
      var(--ln) 0 calc(var(--top) + ((var(--l-h) + var(--l-gap)) * 5)) / 80% var(--l-h);
    --m-r: no-repeat;

    &::before {
      background: linear-gradient(var(--f-l-c), var(--f-l-c)) 0 0/var(--f-l-w) var(--f-l-h) no-repeat,
        linear-gradient(var(--s-l-c), var(--s-l-c)) 0 calc(var(--f-l-h) + var(--s-l-m-t)) /var(--s-l-w) var(--s-l-h) no-repeat,
        var(--bg);
    }
  }

  &#{&}-card-3 {
    --c-w: 100%;
    --c-s: 50px;
    --g-gap: 30px;
    --f-l-w: 200px;
    --f-l-h: 20px;
    --s-l-w: 130px;
    --s-l-h: 10px;
    --l-h: 10px;
    --lines: 3;
    --s-l-m-t: 10px;
    height: calc(var(--l-h) * var(--lines) + var(--l-gap) * (var(--lines) - 1) + var(--g-gap) + var(--c-s) + var(--f-l-h) + var(--s-l-h));

    --m: var(--circle) 0 0/var(--c-s) var(--c-s),
      var(--ln) calc(var(--c-s) + var(--g-gap)) 0 / var(--f-l-w) var(--f-l-h),
      var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--f-l-h) + var(--s-l-m-t)) / var(--s-l-w) var(--s-l-h),
      repeating-linear-gradient(#000 0 var(--l-h), transparent var(--l-h) calc(var(--l-h) + var(--l-gap))) 0 calc(var(--c-s) + var(--g-gap)) / 100% 100%;
    --m-r: no-repeat;
  }

  &#{&}-list {
    --bullet-ratio: 1.4;
    --b: calc(var(--l-h) * var(--bullet-ratio));
    --p: calc((var(--b) - var(--l-h)) / 2);
    height: calc(var(--b) + ((var(--b) + var(--l-gap)) * (var(--lines) - 1)) + var(--c-p) * 2);

    --m: repeating-linear-gradient(#000 0 var(--b), transparent var(--b) calc(var(--b) + var(--l-gap))) 0 0 / var(--b) 100%,
      repeating-linear-gradient(transparent 0 var(--p), #000 var(--p) calc(var(--p) + var(--l-h)), transparent calc(var(--p) + var(--l-h)) calc(calc(var(--p) * 2 + var(--l-gap) + var(--l-h)))) calc(var(--b) + var(--g-gap)) 0 / calc(var(--c-w) - (var(--b) + var(--g-gap))) 100%;
    --m-r: no-repeat;
  }

  &#{&}-youtube {
    --g-gap: 10px;
    --rect-h: 150px;
    --c-s: 36px;
    height: calc(var(--rect-h) + var(--g-gap) + var(--l-gap) + (var(--l-h) * 2) + var(--c-p) * 2);

    --m: var(--ln) 0 0 / 100% var(--rect-h),
      var(--circle) 0 calc(var(--rect-h) + var(--g-gap)) / var(--c-s) var(--c-s),
      var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap)) / calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.85) var(--l-h),
      var(--ln) calc(var(--c-s) + var(--g-gap)) calc(var(--rect-h) + var(--g-gap) + var(--l-h) + var(--l-gap)) / calc(((var(--c-w) - var(--c-p) * 2) - (var(--c-s) + var(--g-gap))) * 0.6) var(--l-h);
    --m-r: no-repeat;
  }

  &#{&}-image {
    --i-w: 250px;
    height: var(--i-w);
    width: var(--i-w);
    --cw: calc((var(--i-w) - var(--c-p) * 2) / 12);
    --ch: calc(var(--i-w) / 12);
    --c-s: calc(var(--i-w) / 4);

    --m: linear-gradient(to left top, #000 50%, transparent 50.5%) 0 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),
      linear-gradient(to right top, #000 50%, transparent 50.5%) calc(var(--cw) * 2) 100%/calc(var(--cw) * 2) calc(var(--ch) * 4),
      linear-gradient(to left top, #000 50%, transparent 50.5%) calc(var(--cw) * 4) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),
      linear-gradient(to right top, #000 50%, transparent 50.5%) calc(var(--cw) * 8) 100%/calc(var(--cw) * 4) calc(var(--ch) * 6),
      var(--circle) left calc(var(--i-w) / 8) top calc(var(--i-w) / 8) / var(--c-s) var(--c-s);
    --m-r: no-repeat;
  }
}