@layer components {
  input[type="submit"], button, .agentAction, button.btn-danger {
    box-sizing: border-box;
    display: inline-block;
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    line-height: 1em;
    font: inherit;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-button-background-default);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  button:hover, input[type="submit"]:hover, .agentAction:hover {
    background: var(--color-button-background-focus);
  }

  button.btn-danger {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
    color: var(--color-danger);
  }

  button.btn-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
    box-shadow: var(--shadow-md);
  }

  .button_to {
    display: inline-block;
  }
}