/**
 * Trust Rating Component Styles
 *
 * Segment bar display with configurable segments and colors.
 *
 * Variants:
 * - .trust-rating--stacked  : Label/value on top, bar below
 * - .trust-rating--inline   : Label + bar + value in one line
 * - .trust-rating--compact  : Bar + value only (no label)
 * - .trust-rating--bar-only : Just the bar
 *
 * Sizes:
 * - .trust-rating--sm : Small
 * - .trust-rating--md : Medium (default)
 * - .trust-rating--lg : Large
 *
 * Colors (based on level):
 * - .trust-rating--low    : Red (#FF4343)
 * - .trust-rating--medium : Yellow (#FFBB00)
 * - .trust-rating--high   : Green (#55A506)
 */
.trust-rating {
  --trust-color-low: #FF4343;
  --trust-color-medium: #FFBB00;
  --trust-color-high: #55A506;
  --trust-color-empty: #E5E5EF;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.trust-rating__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.trust-rating__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-rating__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wp--preset--color--text-muted, #6b7280);
  white-space: nowrap;
}

.trust-rating__value {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.trust-rating__bar {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
}

.trust-rating__segment {
  width: 1.25rem;
  height: 0.375rem;
  border-radius: 0.125rem;
  background-color: var(--trust-color-empty);
  transition: background-color 0.2s ease;
}

/* Color variants */
.trust-rating--low .trust-rating__segment--filled {
  background-color: var(--trust-color-low);
}

.trust-rating--low .trust-rating__value {
  color: var(--trust-color-low);
}

.trust-rating--medium .trust-rating__segment--filled {
  background-color: var(--trust-color-medium);
}

.trust-rating--medium .trust-rating__value {
  color: var(--trust-color-medium);
}

.trust-rating--high .trust-rating__segment--filled {
  background-color: var(--trust-color-high);
}

.trust-rating--high .trust-rating__value {
  color: var(--trust-color-high);
}

/* Layout: Inline */
.trust-rating--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.trust-rating--inline .trust-rating__content {
  gap: 0.5rem;
}

/* Layout: Compact */
.trust-rating--compact {
  flex-direction: row;
  align-items: center;
}

.trust-rating--compact .trust-rating__content {
  gap: 0.375rem;
}

/* Layout: Bar only */
.trust-rating--bar-only .trust-rating__content {
  gap: 0;
}

/* Size: Small */
.trust-rating--sm {
  gap: 0.125rem;
}

.trust-rating--sm .trust-rating__label {
  font-size: 0.75rem;
}

.trust-rating--sm .trust-rating__value {
  font-size: 0.75rem;
}

.trust-rating--sm .trust-rating__bar {
  gap: 0.125rem;
}

.trust-rating--sm .trust-rating__segment {
  width: 1rem;
  height: 0.25rem;
  border-radius: 0.0625rem;
}

.trust-rating--sm .trust-rating__content {
  gap: 0.375rem;
}

.trust-rating--sm .trust-rating__header {
  gap: 0.375rem;
}

/* Size: Medium (default) */
.trust-rating--md .trust-rating__segment {
  width: 1.25rem;
  height: 0.375rem;
}

/* Size: Large */
.trust-rating--lg {
  gap: 0.375rem;
}

.trust-rating--lg .trust-rating__label {
  font-size: 1rem;
}

.trust-rating--lg .trust-rating__value {
  font-size: 1rem;
}

.trust-rating--lg .trust-rating__bar {
  gap: 0.25rem;
}

.trust-rating--lg .trust-rating__segment {
  width: 1.5rem;
  height: 0.5rem;
  border-radius: 0.1875rem;
}

.trust-rating--lg .trust-rating__content {
  gap: 0.625rem;
}

.trust-rating--lg .trust-rating__header {
  gap: 0.625rem;
}

/* Segment count: 2 */
.trust-rating--segments-2 .trust-rating__segment {
  width: 1.5rem;
}

.trust-rating--segments-2.trust-rating--sm .trust-rating__segment {
  width: 1.25rem;
}

.trust-rating--segments-2.trust-rating--lg .trust-rating__segment {
  width: 1.75rem;
}

/* Segment count: 4 */
.trust-rating--segments-4 .trust-rating__segment {
  width: 1rem;
}

.trust-rating--segments-4.trust-rating--sm .trust-rating__segment {
  width: 0.75rem;
}

.trust-rating--segments-4.trust-rating--lg .trust-rating__segment {
  width: 1.25rem;
}

/* Responsive value (hidden by default) */
.trust-rating__value--responsive {
  display: none;
}

/* Responsive variant */
@container (max-width: 400px) {
  .trust-rating--responsive {
    flex-direction: row;
    align-items: center;
  }

  .trust-rating--responsive .trust-rating__header {
    display: none;
  }

  .trust-rating--responsive .trust-rating__label {
    display: none;
  }

  .trust-rating--responsive .trust-rating__content {
    gap: 0.375rem;
  }

  .trust-rating--responsive .trust-rating__value--responsive {
    display: inline;
    font-size: 0.75rem;
  }
}