.ca-skeleton {
  background-color: $c-skeleton;
  width: 100%;
  position: relative;
  overflow: hidden;
  opacity: 1;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(#fff, 0) 0,
      rgba(#fff, 0.2) 20%,
      rgba(#fff, 0.4) 60%,
      rgba(#fff, 0)
    );
    animation: shimmer 2s infinite;
  }

  &--radius {
    border-radius: 0.7em;
  }

  &--transparent {
    opacity: 0;
  }

  & + &--margin-top {
    margin-top: $px4;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}