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

.skeleton {
  
  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.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: 40px;
  border-radius: 100vh;
  min-width: 65px;
}

.skeleton.thumbnail {
  
  width: 100px;
  height: 100px;
}

.skeletonWrapper {
  
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.skeletonWrapper.light {
  
  background: var(--colorWhate);
}

.skeletonWrapper:not(.wtf) *:before,
.skeletonWrapper:not(.wtf) *:after{
  
  content: none;
}

.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%) }
}