.category-skeleton {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;

  &__tab {
    height: 32px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 20px;
    flex-shrink: 0;
    height: 40px;
  }

  &--animated {
    .category-skeleton__tab {
      animation: skeleton-loading 1.5s ease-in-out infinite;
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
