@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;

@layer cinder.components {
  /* ========================================
   * SECRET VALUE FIELD
   * Masked display for API keys / tokens / secrets with copy action.
   * ======================================== */

  .cinder-secret-value-field {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    min-width: 0;
  }

  .cinder-secret-value-field__label {
    display: block;
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-muted);
    line-height: var(--cinder-leading-tight);
  }

  .cinder-secret-value-field__row {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: var(--cinder-space-1-5) var(--cinder-space-2);
    background: var(--cinder-surface-inset);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-default);
    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  /* Prefix and suffix: non-secret metadata shown alongside the masked value */
  .cinder-secret-value-field__prefix,
  .cinder-secret-value-field__suffix {
    flex-shrink: 0;
    color: var(--cinder-text-muted);
    user-select: none;
  }

  /* The masked/revealed value region */
  .cinder-secret-value-field__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Mask state: bullet characters in muted color to signal "hidden" */
  .cinder-secret-value-field__value[data-cinder-masked] {
    color: var(--cinder-text-subtle);
    letter-spacing: 0.05em;
  }

  /* Revealed state: full monospace value */
  .cinder-secret-value-field[data-cinder-revealed] .cinder-secret-value-field__value {
    color: var(--cinder-text-default);
  }

  /* Action buttons container */
  .cinder-secret-value-field__actions {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-1);
    flex-shrink: 0;
    margin-inline-start: var(--cinder-space-2);
  }

  /* Shared button base: toggle + copy share most styles */
  .cinder-secret-value-field__toggle,
  .cinder-secret-value-field__copy {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cinder-radius-sm);
    color: var(--cinder-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      color var(--cinder-duration-fast) var(--cinder-ease-standard),
      background var(--cinder-duration-fast) var(--cinder-ease-standard),
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  @media (hover: hover) {
    .cinder-secret-value-field__toggle:hover,
    .cinder-secret-value-field__copy:hover {
      color: var(--cinder-text-default);
      background: var(--cinder-surface-hover);
      border-color: var(--cinder-border-strong);
    }
  }

  /* Focus rings */
  .cinder-secret-value-field__toggle:focus-visible,
  .cinder-secret-value-field__copy:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    /* Ring replaces the border while focused rather than stacking on it — the two
       together read as one heavier shape than either was designed to be. */
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-secret-value-field__toggle:focus-visible,
    .cinder-secret-value-field__copy:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 2px;
    }
  }

  /* Copy confirmed state.
   *
   * Stays on the FILL token, unlike CopyButton's equivalent rule which moved to
   * --cinder-status-success-text. The divergence is deliberate: this button is
   * always icon-only (the trigger's sole child is an aria-hidden <Check>, with
   * the accessible name on aria-label), so `color:` here paints an SVG stroke
   * held to the 3:1 non-text floor rather than ink held to 4.5:1. CopyButton has
   * a text-bearing mode and therefore needs the -fg ramp. */
  .cinder-secret-value-field__copy[data-cinder-copied] {
    color: var(--cinder-status-success-solid);
    border-color: var(--cinder-status-success-solid);
  }

  /* Toggle pressed state (revealed) */
  .cinder-secret-value-field__toggle[aria-pressed='true'] {
    color: var(--cinder-text-default);
    background: var(--cinder-surface-hover);
  }

  /* SVG icon sizing */
  .cinder-secret-value-field__icon {
    width: 1rem;
    height: 1rem;
    display: block;
    flex-shrink: 0;
  }

  /* Warning/help text slot: e.g. "Copy this now; it will not be shown again." */
  .cinder-secret-value-field__warning {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-muted);
  }
}