ui-button {
  display: inline-flex;
  height: var(--h-md);
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--pad-btn);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink-body);
  font-size: var(--fs-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--transition);
}

ui-button:hover {
  border-color: var(--line-hover-strong);
  background: var(--bg-soft);
}

ui-button:focus-visible {
  outline: none;
  border-color: var(--blue-edge);
  box-shadow: var(--ring);
}

ui-button[variant='primary'] {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: var(--white);
  font-weight: var(--fw-medium);
}

ui-button[variant='primary']:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

ui-button[variant='danger'] {
  border-color: var(--danger-edge);
  background: var(--danger);
  color: var(--white);
}

ui-button[variant='danger']:hover {
  border-color: var(--danger-edge);
  background: var(--danger-edge);
  color: var(--white);
}

ui-button[variant='ghost'] {
  border-color: transparent;
  background: none;
  color: var(--blue);
}

ui-button[variant='ghost']:hover {
  border-color: transparent;
  background: var(--blue-ghost-hover);
}

ui-button[variant='tool'] {
  height: var(--h-sm);
  padding: 0 var(--sp-5);
  font-size: var(--fs-xs);
  border-radius: var(--radius);
}

ui-button[variant='accent'] {
  border-color: var(--blue-line);
  background: var(--blue-tint-strong);
  color: var(--blue-darker);
  font-weight: var(--fw-semibold);
}

ui-button[variant='accent']:hover {
  border-color: var(--blue-bright);
  background: var(--blue-tint-hover);
}

ui-button[variant='accent-quiet'] {
  border-color: var(--blue-line);
  background: var(--blue-tint-soft);
  color: var(--blue);
}

ui-button[variant='accent-quiet']:hover:not([disabled]) {
  border-color: var(--blue-bright);
  background: #e7f1fa;
  color: var(--blue-darker);
}

ui-button[variant='warn'] {
  border-color: var(--amber-line);
  background: var(--amber-tint);
  color: var(--amber-ink);
}

ui-button[variant='warn']:hover {
  border-color: var(--amber);
  background: var(--amber-tint-hover);
}

ui-button[variant='ok'] {
  border-color: var(--green-line);
  background: var(--green-tint);
  color: var(--green-ink);
}

ui-button[variant='ok']:hover {
  border-color: var(--green);
  background: var(--green-tint-hover);
}

ui-button[variant='danger-soft'] {
  border-color: var(--danger-line);
  background: var(--danger-tint);
  color: var(--danger-ink);
}

ui-button[variant='danger-soft']:hover {
  border-color: var(--danger-line-hover);
  background: var(--danger-tint);
  color: var(--danger);
}

ui-button[on-dark] {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #e8eaed;
}

ui-button[on-dark]:hover:not([disabled]) {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

ui-button[on-dark][variant='danger-soft'] {
  border-color: rgba(245, 93, 62, 0.55);
  background: rgba(245, 93, 62, 0.16);
  color: #ff8e71;
}

ui-button[on-dark][variant='danger-soft']:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--white);
}

ui-button[data-size='sm'] {
  height: var(--h-sm);
  padding: 0 var(--sp-5);
  font-size: var(--fs-sm);
}

ui-button svg {
  flex: none;
}

ui-button[variant-layout='icon'] {
  width: var(--h-md);
  height: var(--h-md);
  padding: 0;
  justify-content: center;
  color: var(--ink-soft);
}

ui-button[variant-layout='icon']:hover {
  color: var(--ink);
}

ui-button[variant-layout='icon'][data-size='sm'] {
  width: var(--h-sm);
  height: var(--h-sm);
}

ui-button[on-dark][variant-layout='icon'] {
  color: #e8eaed;
}

ui-button[on-dark][variant-layout='icon']:hover:not([disabled]) {
  color: var(--white);
}

ui-button[disabled] {
  border-color: var(--off-line);
  background: var(--off-bg);
  color: var(--off-ink);
  pointer-events: none;
}

ui-button[on-dark][disabled] {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.34);
}

ui-button[hidden] {
  display: none;
}