/* SegmentedControl Component Styles */

.mint-segmented-control {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Card variant container - matches RFA design.
   `width: fit-content` is load-bearing: `inline-grid` alone gets blockified and
   stretched when the control is a stretching flex/grid item. */
.mint-segmented-control--card {
  display: inline-grid;
  box-sizing: border-box; /* full-width must include the padding */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  max-width: 100%;
  gap: 0.1875rem;
  padding: 0.1875rem;
  border-radius: var(--radius-md);
  background-color: var(--bg-tertiary);
  overflow: visible;
}

.mint-segmented-control--full-width:not(.mint-segmented-control--card) {
  display: flex;
  width: 100%;
}

.mint-segmented-control--card.mint-segmented-control--full-width {
  display: grid;
  width: 100%;
}

.mint-segmented-control--disabled {
  opacity: var(--mint-disabled-opacity);
  pointer-events: none;
}

/* Options - shared styles */
.mint-segmented-control__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}

.mint-segmented-control__option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
  z-index: 1;
}

.mint-segmented-control__option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

/* Remove double borders between adjacent options (simple variant only) */
.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option + .mint-segmented-control__option {
  margin-left: -1px;
}

/* First and last option border radius (simple variant only) */
.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.mint-segmented-control:not(.mint-segmented-control--card) .mint-segmented-control__option:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Simple variant */
.mint-segmented-control__option--simple {
  flex: 1;
  padding: 0.5rem 1rem;
  /* `flex: 1` (basis 0) would otherwise squeeze a longer label onto two lines. */
  white-space: nowrap;
}

.mint-segmented-control__option--simple:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
  background-color: var(--bg-hover);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  z-index: 1;
}

/* Card variant - matches RFA raised card design */
.mint-segmented-control__option--card {
  flex: 1;
  padding: 0.5rem 0.75rem;
  gap: 0.0625rem;
  border: none;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text-muted);
}

.mint-segmented-control__option--card:hover:not(.mint-segmented-control__option--active):not(.mint-segmented-control__option--disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mint-segmented-control__option--card.mint-segmented-control__option--active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Size variants - simple */
.mint-segmented-control__option--simple.mint-segmented-control__option--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  min-height: var(--form-height-sm);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--md {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: var(--form-height-md);
}

.mint-segmented-control__option--simple.mint-segmented-control__option--lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  min-height: var(--form-height-lg);
}

/* Size variants - card */
.mint-segmented-control__option--card.mint-segmented-control__option--sm {
  padding: 0.3125rem 0.625rem;
}

.mint-segmented-control__option--card.mint-segmented-control__option--md {
  padding: 0.5rem 0.75rem;
}

.mint-segmented-control__option--card.mint-segmented-control__option--lg {
  padding: 0.75rem 1rem;
}

/* Label */
.mint-segmented-control__label {
  font-weight: 500;
  line-height: 1.25;
}

.mint-segmented-control__option--sm .mint-segmented-control__label {
  font-size: 0.75rem;
}

.mint-segmented-control__option--md .mint-segmented-control__label {
  font-size: 0.875rem;
}

.mint-segmented-control__option--lg .mint-segmented-control__label {
  font-size: 1rem;
}

/* Optional color swatch (e.g. a group color) before the label. */
.mint-segmented-control__swatch {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: 0.0625rem;
}

/* Description (card variant only) */
.mint-segmented-control__description {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.25;
}

/* Description color in active state - use text-muted for card variant, primary for simple */
.mint-segmented-control__option--simple.mint-segmented-control__option--active .mint-segmented-control__description {
  color: color-mix(in srgb, white 80%, transparent);
}

.mint-segmented-control__option--card.mint-segmented-control__option--active .mint-segmented-control__description {
  color: var(--text-muted);
}

.mint-segmented-control__option--sm .mint-segmented-control__description {
  font-size: 0.6875rem;
}

.mint-segmented-control__option--md .mint-segmented-control__description {
  font-size: 0.75rem;
}

.mint-segmented-control__option--lg .mint-segmented-control__description {
  font-size: 0.875rem;
}