/* Three action variants shared by every read/edit page. */
@layer components {
  :root {
    --ui-action-size: 2rem;
    --ui-action-font: 700 0.8rem/1.2 "DM Sans", sans-serif;
    --ui-icon-size: 1rem;
    --ui-fill: var(--red-050);
    --ui-on-solid: var(--paper);
    .ui-button {
      --ui-action-color: var(--accent);
      --ui-action-hover: var(--accent-strong);
      --ui-action-tint: var(--ui-fill);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      gap: 0.5rem;
      height: var(--ui-action-size);
      padding: 0 0.75rem;
      border: 1px solid transparent;
      border-radius: var(--control-radius);
      background: transparent;
      color: var(--ui-action-color);
      font: var(--ui-action-font);
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 120ms ease, border-color 120ms ease;

      .icon,
      .brand-icon {
        flex: none;
        width: var(--ui-icon-size);
        height: var(--ui-icon-size);
      }
      &.ui-button--bordered {
        border-color: var(--line);
      }
      &.ui-button--primary {
        border-color: var(--ui-action-color);
        background: var(--ui-action-color);
        color: var(--ui-on-solid);
      }
      &.is-large {
        --ui-action-size: 3rem;
        --ui-action-font: 700 1rem/1.2 "DM Sans", sans-serif;
        --ui-icon-size: 1.25rem;
        padding: 0 1.25rem;
      }
      &.is-destructive {
        --ui-action-color: var(--danger);
        --ui-action-hover: var(--red-700);
        --ui-action-tint: var(--ui-fill);
      }
      &.is-icon-only {
        width: var(--ui-action-size);
        padding: 0;
      }
      &:not(:disabled):hover {
        background: var(--ui-action-tint);
        color: var(--ui-action-color);

        &.ui-button--bordered {
          border-color: var(--ui-action-color);
        }
        &.ui-button--primary {
          border-color: var(--ui-action-hover);
          background: var(--ui-action-hover);
          color: var(--ui-on-solid);
        }
      }
      &:focus-visible {
        outline: 2px solid var(--ui-action-color);
        outline-offset: 2px;
      }
      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
    .ui-button[hidden] { display: none; }
  }
}