/* The components of the gallery's own catalogs: the restaurant catalog's
   Rating (GalleryWeb.RestaurantComponents) and the widgets catalog's
   Badge, Progress and Panel (GalleryWeb.WidgetComponents). They use the
   --a2ui-* tokens of a2ui_phoenix.css, like the basic components, so a
   page that themes those themes these too. */

.restaurant-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.restaurant-rating-stars {
  display: inline-flex;
  flex: none;
  gap: 0.125rem;
}

.restaurant-rating-star {
  width: 0.9375rem;
  height: 0.9375rem;
  fill: var(--a2ui-color-border-strong);
}

.restaurant-rating-star-full,
.restaurant-rating-half {
  fill: #f5a524;
}

.restaurant-rating-label {
  color: var(--a2ui-color-muted);
  font-size: var(--a2ui-font-size-s);
  font-variant-numeric: tabular-nums;
}

.widget-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 1.375rem;
  padding: 0 0.5625rem;
  border-radius: 999px;
  font-size: var(--a2ui-font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.widget-badge-info {
  background: color-mix(in oklab, #0284c7 14%, transparent);
  color: light-dark(#0369a1, #7dd3fc);
}

.widget-badge-success {
  background: color-mix(in oklab, var(--a2ui-color-success) 14%, transparent);
  color: var(--a2ui-color-success);
}

.widget-badge-warning {
  background: color-mix(in oklab, var(--a2ui-color-warning) 16%, transparent);
  color: var(--a2ui-color-warning);
}

.widget-badge-danger {
  background: color-mix(in oklab, var(--a2ui-color-error) 13%, transparent);
  color: var(--a2ui-color-error);
}

.widget-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 10rem;
}

.widget-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--a2ui-font-size-s);
}

.widget-progress-label {
  color: var(--a2ui-color-on-surface);
  font-weight: 550;
}

.widget-progress-value {
  color: var(--a2ui-color-muted);
  font-family: var(--a2ui-font-family-monospace);
  font-variant-numeric: tabular-nums;
}

.widget-progress-track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--a2ui-color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--a2ui-color-border);
}

.widget-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--a2ui-color-primary) 65%, #ffffff), var(--a2ui-color-primary));
  transition: width 0.4s var(--a2ui-easing);
}

.widget-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: var(--a2ui-spacing-l);
  border: var(--a2ui-border-width) solid var(--a2ui-color-border);
  border-radius: var(--a2ui-border-radius-l);
  background: var(--a2ui-color-surface);
  box-shadow: var(--a2ui-shadow-s);
}

.widget-panel-title {
  margin: 0;
  color: var(--a2ui-color-on-surface);
  font-size: var(--a2ui-font-size-m);
  font-weight: 620;
  letter-spacing: -0.01em;
}

.widget-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--a2ui-gap);
}