/* Shared menu skeleton placeholders. */

.menu-skeleton-block,
.menu-skeleton-line,
.menu-skeleton-card,
.menu-skeleton-button {
  position: relative;
  overflow: hidden;
  background: var(--vk-skeleton-bg);
}

.menu-skeleton-block {
  border-radius: inherit;
}

.menu-skeleton-block::after,
.menu-skeleton-line::after,
.menu-skeleton-card::after,
.menu-skeleton-button::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--vk-skeleton-shimmer),
    transparent
  );
  animation: menu-skeleton-shimmer 1300ms ease-in-out infinite;
}

.menu-skeleton-line {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px;
}

.menu-skeleton-line.is-short {
  width: 42%;
}

.menu-skeleton-line.is-medium {
  width: 68%;
}

.menu-skeleton-title {
  width: 76%;
  height: 18px;
  border-radius: 999px;
}

.menu-skeleton-card {
  min-height: var(--menu-panel-row-height);
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: var(--vk-paper-control-radius);
}

.menu-skeleton-button {
  display: block;
  min-height: var(--menu-panel-row-height);
  border-radius: var(--vk-paper-control-radius);
}

.menu-skeleton-preview-image {
  position: absolute;
  inset: -1.5%;
  width: 103%;
  height: 103%;
  display: block;
  object-fit: cover;
}

.menu-skeleton-dot {
  background: var(--vk-skeleton-bg);
}

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