/* ../../../ui/react/pico/src/Skeleton.css */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
  background: linear-gradient(90deg, var(--pico-muted-border-color) 0%, color-mix(in srgb, var(--pico-muted-border-color) 72%, white) 50%, var(--pico-muted-border-color) 100%);
  animation: skeleton-shift 1.2s ease-in-out infinite;
  background-size: 220% 100%;
}

.skeleton-line {
  display: block;
  height: 1rem;
  margin: 0;
}

.skeleton-line.title {
  height: 2.4rem;
}

.skeleton-line.heading {
  height: 1.5rem;
}

.skeleton-actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  gap: .75rem;
}

.skeleton-table, .skeleton-table-row, .skeleton-detail-table {
  display: grid;
  gap: .75rem;
}

.skeleton-detail-row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(10rem, 1fr);
  gap: 1rem;
}

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

  100% {
    background-position: -100%;
  }
}