@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.skeleton {
  display: block;
  height: 1.2em;
  width: 100%;

  will-change: transform;
  animation: placeHolderShimmer 2s linear infinite forwards;
  -webkit-backface-visibility: hidden;

  background: rgba(#000, 0.05);
  background: linear-gradient(90deg, rgba(#000, 0.03) 8%, rgba(#000, 0.05) 18%, rgba(#000, 0.03) 33%);
  background-size: 800px 104px;

  &.text {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    transform-origin: 0 55%;
    transform: scale(1, .2);
    border-radius: 4px;

    &:empty::before {
      content: "\00a0";
    }
  }

  &.circle {
    border-radius: 50%;
  }

  &.with-children {
    & > * {
      visibility: hidden;
    }
  }

  &.auto-width {
    max-width: fit-content;
  }

  &.auto-height {
    height: auto;
  }
}

@keyframes placeHolderShimmer {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-position: -468px 0
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-position: 468px 0
  }
}