:host {
  .teo-skeleton {
    position: relative;
    overflow: hidden;
    display: inline-block;

    &::after {
      content: '';

      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      left: 0;
      transform: translateX(-100%);

      height: 100%;

      background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 40%), rgb(255 255 255 / 0%));

      animation: skeleton 1.1s infinite;
    }
  }
}

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

  100% {
    transform: translateX(100%);
  }
}