/**
 * @file
 * Health Status Component
 * Displays composite health indicators with expandable breakdown details.
 */

/* Health Status Container */
.health-status {
  position: relative;
  margin-bottom: 0.75rem;
}

/* Clickable Summary Row */
.health-status__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.health-status__summary::-webkit-details-marker {
  display: none;
}

/* Health Dots Container */
.health-dots {
  display: flex;
  gap: 0.25rem;
}

/* Individual Status Dot */
.health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Dot Status Variants */
.health-dot--ok {
  background: var(--color-success-text);
}

.health-dot--warning {
  background: var(--color-warning-text);
}

.health-dot--error {
  background: var(--color-error-text);
}

/* Status Label Text */
.health-label {
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

/* Label Color Variants */
.health-label--ok {
  color: var(--color-success-text);
}

.health-label--warning {
  color: var(--color-warning-text);
}

.health-label--error {
  color: var(--color-error-text);
}

/* Toggle Chevron */
.health-toggle {
  margin-left: auto;
  color: var(--color-gray-400);
  transition: transform 0.2s;
}

.health-status[open] .health-toggle {
  transform: rotate(180deg);
}

/* Expanded Breakdown Box */
.health-breakdown {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

/* Breakdown Item Row */
.health-breakdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.health-breakdown__item .health-dot {
  width: 6px;
  height: 6px;
}

.health-breakdown__label {
  color: var(--color-gray-600);
  min-width: 90px;
}

.health-breakdown__value {
  color: var(--color-gray-800);
  font-weight: 500;
}