/* Left menu panel readiness skeleton. */

.menu-left-skeleton {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  margin-inline:
    calc(-1 * var(--vk-paper-list-gutter-left))
    calc(-1 * var(--vk-paper-list-gutter-right));
  padding-inline:
    var(--vk-paper-list-gutter-left)
    var(--vk-paper-list-gutter-right);
  padding-bottom: var(--menu-shell-scroll-shadow-pad-bottom);
  overflow: hidden;
  pointer-events: none;
}

.menu-left-skeleton-group {
  display: grid;
  gap: 8px;
}

.menu-left-skeleton-list {
  display: grid;
  gap: 6px;
}

.menu-left-skeleton-title,
.menu-left-skeleton-icon,
.menu-left-skeleton-text,
.menu-left-skeleton-count {
  position: relative;
  overflow: hidden;
  background: var(--vk-paper-depth-raised-max-bg);
}

.menu-left-skeleton-row {
  width: 100%;
  height: var(--menu-panel-row-height);
  min-height: var(--menu-panel-row-height);
  display: flex;
  align-items: center;
  gap: var(--menu-panel-row-gap);
  box-sizing: border-box;
  padding: var(--menu-panel-row-padding-y) var(--menu-panel-row-padding-x);
  border-radius: var(--menu-panel-row-radius);
  background: var(--vk-paper-depth-raised-max-bg);
  box-shadow: var(--vk-shadow-paper-hover);
}

.menu-left-skeleton-title::after,
.menu-left-skeleton-icon::after,
.menu-left-skeleton-text::after,
.menu-left-skeleton-count::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--vk-text-primary) 9%, transparent) 45%,
      transparent 80%
    );
  transform: translateX(-100%);
  animation: menu-skeleton-shimmer 1300ms ease-in-out infinite;
}

.menu-left-skeleton-title {
  width: 46%;
  height: 12px;
  border-radius: 999px;
  opacity: 0.65;
}

.menu-left-skeleton-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  opacity: 0.72;
}

.menu-left-skeleton-text {
  flex: 1 1 auto;
  min-width: 0;
  height: 12px;
  border-radius: 999px;
  opacity: 0.72;
}

.menu-left-skeleton-count {
  flex: 0 0 24px;
  width: 24px;
  height: 16px;
  border-radius: 999px;
  opacity: 0.72;
}

#menu_left_zone_layout.is-left-panel-ready .menu-left-skeleton {
  display: none;
}

#menu_left_zone_layout:not(.is-left-panel-ready) .menu-shell-scroll,
#menu_left_zone_layout:not(.is-left-panel-ready) .menu-auth-overlay,
#menu_left_zone_layout:not(.is-left-panel-ready) #menu_left_bottom_auth {
  display: none;
}