/* --------------------  Skeleton ------------------ */

  body {
    
    & .skeleton:not(.wtf) {
      
      background: #eee;
      overflow: hidden;
      border-radius: 4px;
      display: block;
      margin: .3em 0;
    }
    
    & .skeleton.marginAuto {
    
      margin: auto;
    }
    
    & .skeleton.marginTopZero {
      
      margin-top: 0;
    }
    
    & .skeleton.marginBottomZero {
      
      margin-bottom: 0;
    }
    
    & .skeleton.text {
      
      width: 100%;
      height: 14px;
    }
    
    & .skeleton.width10 {
      
      width: 10%;
      height: 14px;
    }
    
    & .skeleton.width20 {
      
      width: 20%;
      height: 14px;
    }
    
    & .skeleton.width30 {
      
      width: 30%;
      height: 14px;
    }
    
    & .skeleton.width40 {
      
      width: 40%;
      height: 14px;
    }
    
    & .skeleton.width50 {
      
      width: 50%;
      height: 14px;
    }
    
    & .skeleton.width60 {
      
      width: 60%;
      height: 14px;
    }
    
    & .skeleton.width70 {
      
      width: 70%;
      height: 14px;
    }
    
    & .skeleton.width80 {
      
      width: 80%;
      height: 14px;
    }
    
    & .skeleton.width90 {
      
      width: 90%;
      height: 14px;
    }
    
    & .skeleton.title {
      
      height: 16px;
    }
    
    & .skeleton.fs30 {
      
      height: 30px;
    }
    
    & .skeleton.fs28 {
      
      height: 28px;
    }
    
    & .skeleton.fs26 {
      
      height: 26px;
    }
    
    & .skeleton.fs24 {
      
      height: 24px;
    }
    
    & .skeleton.fs22 {
      
      height: 22px;
    }
    
    & .skeleton.fs20 {
      
      height: 20px;
    }
    
    & .skeleton.fs18 {
      
      height: 18px;
    }
    
    & .skeleton.fs16 {
      
      height: 16px;
    }
    
    & .skeleton.fs14 {
    
      height: 14px;
    }
    
    & .skeleton.fs13 {
      
      height: 13px;
    }
    
    & .skeleton.fs12 {
      
      height: 12px;
    }
    
    & .skeleton.fs11 {
      
      height: 11px;
    }
    
    & .skeleton.input {
      
      height: 40px;
    }
    
    & .skeleton.icon {
      
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    
    & .skeleton.avatar {
      
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    
    & .skeleton.btn {
      
      height: 30px;
      border-radius: 4px;
      min-width: 65px;
    }
    
    & .skeleton.thumbnail {
      
      width: 100px;
      height: 100px;
    }
    
    & .skeletonWrapper {
      
      border-color: transparent;
      pointer-events: none;
      position: relative;
      overflow: hidden;
      color: #eee;
      border: 0;
      box-shadow: none;
    }
    
    & .skeletonWrapper.light {
      
      background: var(--colorWhate);
    }
    
    & .skeletonWrapper:not(.wtf) *:before,
    & .skeletonWrapper:not(.wtf) *:after{
      
      content: none;
    }
    
    & .skeletonWrapper:not(.wtf) *:is(:hover, :focus){
      
      all: unset;
    }
    
    & .shimmerWrapper {
      
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: loading 1500ms infinite;
    }
    
    & .shimmer {
      
      width: 20%;
      height: 100%;
      background: rgba(255,255,255,.3);
      transform: skewX(-20deg);
      box-shadow: 0 0 30px 30px rgba(255,255,255,.3);
    }
  
  }

  @keyframes loading {
    
    0% { transform: translateX(-150%) }
    50% { transform: translateX(-60%) }
    100% { transform: translateX(150%) }
  }