/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
.skeleton {
  min-width: 8px;
  min-height: 8px;
  background-color: var(--color-content-default, #282828);
  opacity: 0.16;
  overflow: hidden;
}
.skeleton_shape--circle {
  border-radius: 50%;
}
.skeleton_shape--square {
  border-radius: 8px;
}

.animation {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 0.56) 50%, rgba(246, 246, 246, 0) 100%);
  mix-blend-mode: overlay;
  animation: 2.5s ease-out infinite shine;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}