[data-kmh-loading-state] {
  min-height: 1.5em;
}

[data-kmh-loading-state="loading"],
[data-kmh-loading-state="slow"] {
  color: #334e68;
}

[data-kmh-loading-state="loading"]::before,
[data-kmh-loading-state="slow"]::before {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-right: .5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.08em;
  animation: kmh-loading-spin .75s linear infinite;
}

[data-kmh-loading-state="slow"] {
  color: #765b00;
}

[data-kmh-loading-state="error"] {
  color: #9c1c1c;
}

[data-kmh-loading-state="success"] {
  color: #17653a;
}

.kmh-loading-retry {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  margin: 4px 0 4px 8px;
  padding: 6px 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.kmh-loading-skeleton {
  min-height: 3.25rem;
  border-radius: 8px;
  background: linear-gradient(90deg, #edf2f6 25%, #f8fafc 45%, #edf2f6 65%);
  background-size: 300% 100%;
  animation: kmh-loading-skeleton 1.2s ease-in-out infinite;
}

@keyframes kmh-loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes kmh-loading-skeleton {
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-kmh-loading-state="loading"]::before,
  [data-kmh-loading-state="slow"]::before,
  .kmh-loading-skeleton {
    animation: none;
  }
}