/*
 * Shared controls for product-owned UI. These classes use semantic tokens so
 * Figma-backed themes can change values without each feature redefining them.
 */
.ui-button {
  border: 1px solid var(--ds-button-border);
  border-radius: var(--nb-radius-control);
  padding: 7px 9px;
  background: var(--ds-button-surface);
  color: var(--ds-button-icon);
  font: 500 var(--nb-type-body-xs-size)/var(--nb-type-body-xs-line) var(--nb-font-sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.ui-button:hover:not(:disabled),
.ui-button:focus-visible {
  border-color: var(--ds-button-border-hover);
  background: var(--ds-button-hover);
  color: var(--ds-text);
  outline: 0;
}

.ui-button:disabled,
.ui-icon-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.ui-button--danger {
  border-color: var(--ds-danger);
  background: var(--ds-danger);
  color: var(--ds-danger-foreground);
}

.ui-button--danger:hover:not(:disabled),
.ui-button--danger:focus-visible {
  border-color: var(--ds-danger-hover);
  background: var(--ds-danger-hover);
  color: var(--ds-danger-foreground);
}

/* Existing product dialogs use the established 13.2px control scale. */
dialog .ui-button {
  font-size: 13.2px;
}

.ui-icon-button {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ds-button-border);
  border-radius: var(--nb-radius-control);
  background: var(--ds-button-surface);
  color: var(--ds-button-icon);
  cursor: pointer;
}

.ui-icon-button:hover:not(:disabled),
.ui-icon-button:focus-visible {
  border-color: var(--ds-button-border-hover);
  background: var(--ds-button-hover);
  color: var(--ds-text);
  outline: 0;
}

.ui-field {
  border: 1px solid var(--ds-field-border);
  border-radius: var(--nb-radius-control);
  background: var(--ds-field-surface);
  color: var(--ds-text);
  font: 400 var(--nb-type-body-xs-size)/var(--nb-type-body-xs-line) var(--nb-font-sans);
}

.ui-field:focus {
  border-color: var(--ds-field-focus);
  outline: 0;
}

/* Figma Button Group/horizontal: one input-border frame, clipped 6px corners,
   and subtle 1px dividers between contiguous, unrounded segments. */
.ui-button-group {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--ds-field-border);
  border-radius: 6px;
  background: var(--ds-app-surface);
}

.ui-button-group > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--ds-button-border);
  border-radius: 0;
  background: transparent;
  color: var(--ds-text);
  font: 400 14px/20px var(--nb-font-sans);
}

.ui-button-group > button:last-child { border-right: 0; }
.ui-button-group > button:hover:not(:disabled) { background: var(--ds-app-surface-subtle); }
.ui-button-group > button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--ds-field-focus); outline-offset: -2px; }