@layer components {
  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-space-half);
    margin-block: var(--block-space);

    & form {
      margin: 0;
    }
  }

  .action {
    --action-ink: var(--color-ink);
    --action-bg: var(--color-page);
    --action-rule: var(--color-rule);

    display: inline-block;
    padding-block: 0.35rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--action-rule);
    border-radius: var(--radius);
    background: var(--action-bg);
    color: var(--action-ink);
    font: inherit;
    font-size: var(--text-small);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms;

    &:hover:not(:disabled) {
      --action-bg: var(--color-shade);
      --action-rule: var(--color-muted);
    }

    &:active:not(:disabled) {
      --action-bg: var(--color-rule);
    }

    &:disabled {
      --action-ink: var(--color-muted);

      cursor: not-allowed;
    }
  }

  .action--primary {
    --action-ink: var(--color-page);
    --action-bg: var(--color-accent);
    --action-rule: var(--color-accent);

    font-weight: 600;

    &:hover:not(:disabled) {
      --action-bg: var(--color-accent-strong);
      --action-rule: var(--color-accent-strong);
    }

    &:active:not(:disabled) {
      --action-bg: var(--color-accent-strong);
    }

    &:disabled {
      --action-ink: var(--color-muted);
      --action-bg: var(--color-shade);
      --action-rule: var(--color-rule);
    }
  }
}