// ngx-t-forms — Shared editor mixins (TDDE editor redesign · Phase 0)
// =====================================================================
//
// Internal SCSS helpers consumed by the t-dynamic-data-edit editor components
// via `@use '..../styles/editor-mixins' as editor;`. They only reference
// `var(--lib-forms-*)` tokens (defined globally on :root in _tokens.scss) so
// they stay dark-mode-safe and never hardcode a hex literal (CLAUDE.md §3).
//
// These are the single source of truth for the recurring editor "look" so the
// 21 editors stay consistent instead of re-inventing focus rings, cards and
// chips 21 times.

/// Material-style focus ring: primary border + soft primary halo.
@mixin focus-ring {
  outline: none;
  border-color: var(--lib-forms-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lib-forms-primary) 25%, transparent);
}

/// Disabled affordance — dim + inert. Pair with `aria-disabled`/`[disabled]`.
@mixin disabled {
  opacity: 0.55;
  pointer-events: none;
}

/// Section / group card (GDP §17 soft elevation, no divider lines).
@mixin card {
  background: var(--lib-forms-surface);
  border: 1px solid color-mix(in srgb, var(--lib-forms-outline) 15%, transparent);
  border-radius: var(--lib-forms-radius-lg, 12px);
  box-shadow: var(--lib-forms-shadow-resting);
}

/// Token-styled text input matching the outline mat-form-field metrics.
@mixin field-input {
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lib-forms-outline);
  border-radius: var(--lib-forms-radius-sm, 8px);
  background: var(--lib-forms-surface);
  font-size: 0.875rem;
  color: var(--lib-forms-on-surface);
  transition:
    border-color var(--lib-forms-duration-hover, 300ms) var(--lib-forms-easing),
    box-shadow var(--lib-forms-duration-hover, 300ms) var(--lib-forms-easing);

  &:focus {
    @include focus-ring;
  }
}

/// Removable chip / tag (design-rule-book §14).
@mixin chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  background: color-mix(in srgb, var(--lib-forms-primary) 10%, transparent);
  border-radius: var(--lib-forms-radius-pill, 6px);
  font-size: 0.8125rem;
  color: var(--lib-forms-on-surface);
}

/// Premium pill segmented control from a `mat-button-toggle-group`.
/// Include on a WRAPPER element around the group (the group itself must be a
/// descendant). Replaces Material's bordered toggle + single-select checkmark
/// with a muted track and a lifted active pill — the single source of truth so
/// every segmented control (value-access mode, validator All/Any, …) matches.
@mixin segmented-control($label-padding: 0.375rem 1.125rem, $label-font: 0.8125rem) {
  ::ng-deep .mat-button-toggle-group {
    border: none;
    border-radius: var(--lib-forms-radius-pill, 999px);
    background: var(--lib-forms-surface-container-high);
    padding: 0.25rem;
    gap: 0.25rem;
    box-shadow: none;
    overflow: hidden;
  }

  ::ng-deep .mat-button-toggle {
    border: none;
    background: transparent;
    border-radius: var(--lib-forms-radius-pill, 999px);
    color: var(--lib-forms-on-surface-variant);
    transition:
      color var(--lib-forms-duration-hover, 300ms) var(--lib-forms-easing),
      background var(--lib-forms-duration-hover, 300ms) var(--lib-forms-easing);
  }

  // Material draws a divider between grouped toggles — remove it for the pill look.
  ::ng-deep .mat-button-toggle + .mat-button-toggle {
    border-left: none;
  }

  ::ng-deep .mat-button-toggle-button {
    height: auto;
  }

  ::ng-deep .mat-button-toggle-label-content {
    padding: $label-padding;
    line-height: 1.5;
    font-size: $label-font;
    font-weight: 600;
  }

  ::ng-deep .mat-button-toggle-checked {
    background: var(--lib-forms-surface);
    color: var(--lib-forms-primary);
    box-shadow: var(--lib-forms-shadow-edge);
  }

  // The active segment is signalled by the lifted surface + colour, so the
  // default single-select checkmark is redundant noise.
  ::ng-deep .mat-pseudo-checkbox {
    display: none;
  }
}