.skeleton {
  display: flex;
  flex: 1; }
  .skeleton[data-layout='horizontal'] {
    flex-direction: column; }
  .skeleton__item {
    height: 65px;
    background-color: #f2f2f2;
    border-radius: 4px; }
    .skeleton__item:nth-last-child() {
      margin-bottom: 0 !important; }
    .skeleton__item.animated {
      position: relative;
      overflow: hidden; }
      .skeleton__item.animated::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2));
        animation: shimmer 1s ease-in-out infinite; }

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