/**
 * @file
 * Visual styles for buttons.
 *
 * Drupal applies .button — and typically .button--primary for the main
 * action — automatically to <input type="submit">, <button>, and
 * <a class="button"> via core RenderElement processing.
 *
 * Variants commonly emitted by core/contrib:
 *   .button             — base, neutral
 *   .button--primary    — primary action (form submit defaults to this)
 *   .button--danger     — destructive action
 *   .button--small      — compact size
 *   .button[disabled]   — disabled state (.is-disabled in some contexts)
 */
@layer components {

  .button,
  .image-button {
    display: inline-block;
    padding: var(--size-2) var(--size-3);
    border: 1px solid var(--text-2);
    border-radius: var(--radius-2);
    background-color: var(--surface-1);
    color: var(--text-1);
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.15s var(--ease-out-2),
      border-color 0.15s var(--ease-out-2),
      color 0.15s var(--ease-out-2);
  }
  .button:not(:first-child),
  .image-button:not(:first-child) {
    margin-inline-start: var(--size-3);
  }
  .button:hover,
  .image-button:hover {
    background-color: var(--surface-2);
    border-color: var(--text-1);
  }
  .button:focus,
  .image-button:focus {
    outline: 2px solid var(--upei-red);
    outline-offset: 2px;
  }

  /* Primary — brand-colored. Form submits typically get this class. */
  .button--primary {
    background-color: var(--upei-red);
    border-color: var(--upei-red);
    color: white;
  }
  .button--primary:hover {
    background-color: var(--upei-dark-red);
    border-color: var(--upei-dark-red);
  }

  /* Danger — destructive action. Outlined by default, fills on hover. */
  .button--danger {
    background-color: var(--surface-1);
    border-color: var(--upei-red);
    color: var(--upei-red);
  }
  .button--danger:hover {
    background-color: var(--upei-red);
    color: white;
  }

  /* Small variant. */
  .button--small {
    padding: var(--size-1) var(--size-2);
    font-size: 0.875em;
  }

  /* Disabled. */
  .button[disabled],
  .button.is-disabled,
  .image-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .button[disabled]:hover,
  .button.is-disabled:hover,
  .image-button[disabled]:hover {
    background-color: var(--surface-1);
    border-color: var(--text-2);
  }

}