.loading-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: var(--loading-gap);
  color: var(--color-text-primary);
}

.loading-state[data-full-width='true'] {
  display: flex;
  width: 100%;
}

.loading-state[data-inline='true'] {
  justify-content: flex-start;
}

.loading-state[hidden] {
  display: none;
}

.loading-state__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.loading-state__spinner {
  width: var(--loading-size-medium);
  height: var(--loading-size-medium);
  border: var(--loading-indicator-width) solid var(--color-border);
  border-block-start-color: var(--color-control-primary);
  border-radius: 50%;
  animation: loading-state-spin var(--duration-loading) linear infinite;
}

.loading-state[data-size='small'] .loading-state__spinner {
  width: var(--loading-size-small);
  height: var(--loading-size-small);
}

.loading-state[data-size='large'] .loading-state__spinner {
  width: var(--loading-size-large);
  height: var(--loading-size-large);
}

.loading-state__dots {
  display: inline-flex;
  gap: var(--space-1);
}

.loading-state__dot {
  width: var(--loading-dot-size);
  height: var(--loading-dot-size);
  border-radius: 50%;
  background: var(--color-control-primary);
  animation: loading-state-pulse var(--duration-loading) ease-in-out infinite alternate;
}

.loading-state[data-size='small'] .loading-state__dot {
  width: var(--loading-dot-size-small);
  height: var(--loading-dot-size-small);
}

.loading-state[data-size='large'] .loading-state__dot {
  width: var(--loading-dot-size-large);
  height: var(--loading-dot-size-large);
}

.loading-state__visual:has(.loading-state__skeleton) {
  display: grid;
  width: 100%;
}

.loading-state__skeleton {
  display: block;
  width: 100%;
  height: var(--skeleton-text-height);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--skeleton-background), var(--skeleton-highlight), var(--skeleton-background));
  background-size: var(--skeleton-background-size);
  animation: loading-state-shimmer var(--skeleton-shimmer-duration) linear infinite;
}

.loading-state__skeleton[data-variant='circle'] {
  width: var(--loading-size-large);
  height: var(--loading-size-large);
  border-radius: 50%;
}

.loading-state__skeleton[data-variant='rectangle'] {
  height: var(--skeleton-rectangle-height);
}

.loading-state__skeleton[data-variant='card'] {
  height: var(--skeleton-card-height);
  border-radius: var(--radius-lg);
}

.loading-state__label {
  font-weight: var(--font-weight-control);
}

.loading-state__description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-control-md);
}

.loading-state__description[hidden] {
  display: none;
}

@keyframes loading-state-spin {
  to { transform: rotate(1turn); }
}

@keyframes loading-state-pulse {
  to { opacity: var(--loading-pulse-opacity); }
}

@keyframes loading-state-shimmer {
  to { background-position: var(--skeleton-background-end); }
}