/**
 * @file
 * Skeleton loaders for the BF Widget Modal paragraph.
 *
 * Two variants:
 *  - .bf-widget-skeleton         — calendar grid placeholder
 *  - .bf-widget-skeleton--button — single button placeholder
 *
 * Pure CSS shimmer — no JS, no FontAwesome, no extra network requests.
 */

.bf-widget-skeleton,
.bf-widget-skeleton--button {
  --skeleton-base: #e8e8e8;
  --skeleton-shine: #f5f5f5;
  --skeleton-radius: 4px;
}

/* Shimmer animation shared by all skeleton elements */
@keyframes bf-skeleton-shimmer {
  0% { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}

.bf-widget-skeleton__block {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 960px 100%;
  animation: bf-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--skeleton-radius);
}

@media (prefers-reduced-motion: reduce) {
  .bf-widget-skeleton__block {
    animation: none;
  }
}
/* ============================================================
   Button skeleton
   ============================================================ */

.bf-widget-skeleton--button {
  display: inline-block;
  width: 117px;
  height: 58px;
  border-radius: var(--skeleton-radius);
}

/* ============================================================
   Calendar skeleton
   ============================================================ */

.bf-widget-skeleton {
  --skeleton-cell-size: 2.5rem;

  width: 100%;
  max-width: 480px;
  padding: 1rem;
  box-sizing: border-box;
}

/* Month navigation row: prev arrow + month label + next arrow */
.bf-widget-skeleton__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.bf-widget-skeleton__nav-arrow {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.bf-widget-skeleton__nav-label {
  width: 40%;
  height: 1.25rem;
}

/* Weekday header row */
.bf-widget-skeleton__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.bf-widget-skeleton__weekday {
  height: 1rem;
  border-radius: var(--skeleton-radius);
}

/* Date cell grid — 6 rows x 7 columns covers all month layouts */
.bf-widget-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.bf-widget-skeleton__cell {
  height: var(--skeleton-cell-size);
  border-radius: var(--skeleton-radius);
}

/* Dim the cells that represent padding days at start/end of month */
.bf-widget-skeleton__cell--empty {
  opacity: 0.35;
}