.ol-skeleton-host {
  width: 100%;
}

.ol-skeleton-host.is-hidden,
.ol-skeleton-content-hidden {
  display: none !important;
}

.ol-skeleton {
  --ol-skeleton-base: #eef2f7;
  --ol-skeleton-highlight: #f8fafc;
  --ol-skeleton-border: rgba(15, 23, 42, 0.06);
  --ol-skeleton-radius: 18px;
  width: 100%;
}

.dark-layout .ol-skeleton,
body.dark-layout .ol-skeleton,
html.dark .ol-skeleton {
  --ol-skeleton-base: rgba(148, 163, 184, 0.16);
  --ol-skeleton-highlight: rgba(226, 232, 240, 0.22);
  --ol-skeleton-border: rgba(255, 255, 255, 0.08);
}

.ol-skeleton-shimmer,
.ol-skeleton-card,
.ol-skeleton-line,
.ol-skeleton-circle {
  background: linear-gradient(90deg, var(--ol-skeleton-base) 0%, var(--ol-skeleton-highlight) 45%, var(--ol-skeleton-base) 90%);
  background-size: 220% 100%;
  animation: ol-skeleton-shimmer 1.2s linear infinite;
}

.ol-skeleton-card {
  border: 1px solid var(--ol-skeleton-border);
  border-radius: var(--ol-skeleton-radius);
  min-height: 120px;
}

.ol-skeleton-line {
  border-radius: 999px;
  height: 12px;
}

.ol-skeleton-circle {
  border-radius: 999px;
  flex: 0 0 auto;
  height: 44px;
  width: 44px;
}

.ol-skeleton-header,
.ol-skeleton-filters {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.ol-skeleton-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ol-skeleton-header-copy {
  display: grid;
  gap: 0.6rem;
}

.ol-skeleton-header-action {
  border-radius: 999px;
  height: 42px;
  width: 150px;
}

.ol-skeleton-stats,
.ol-skeleton-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--ol-skeleton-columns, 4), minmax(0, 1fr));
  margin-bottom: 1rem;
}

.ol-skeleton-table {
  border: 1px solid var(--ol-skeleton-border);
  border-radius: var(--ol-skeleton-radius);
  overflow: hidden;
}

.ol-skeleton-table-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--ol-skeleton-columns, 5), minmax(0, 1fr));
  padding: 1rem;
}

.ol-skeleton-table-row + .ol-skeleton-table-row {
  border-top: 1px solid var(--ol-skeleton-border);
}

.ol-skeleton-list,
.ol-skeleton-pwa-card,
.ol-skeleton-dashboard {
  display: grid;
  gap: 1rem;
}

.ol-skeleton-pwa-card .ol-skeleton-card {
  min-height: 150px;
}

.ol-skeleton-editor {
  display: grid;
  gap: 1rem;
  grid-template-columns: 280px minmax(0, 1fr);
}

@keyframes ol-skeleton-shimmer {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ol-skeleton-shimmer,
  .ol-skeleton-card,
  .ol-skeleton-line,
  .ol-skeleton-circle {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .ol-skeleton-stats,
  .ol-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ol-skeleton-editor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .ol-skeleton-header {
    grid-template-columns: 1fr;
  }

  .ol-skeleton-header-action {
    width: 100%;
  }

  .ol-skeleton-stats,
  .ol-skeleton-grid,
  .ol-skeleton-table-row {
    grid-template-columns: 1fr;
  }
}