@layer components {
  /* Button base
  /* ------------------------------------------------------------------------ */

  .btn {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
  }

  /* Variants
  /* ------------------------------------------------------------------------ */

  .btn--primary {
    background-color: var(--color-primary);
    color: var(--color-canvas);
  }

  .btn--primary:hover {
    background-color: var(--color-primary-dark);
  }

  .btn--secondary {
    background-color: var(--color-canvas-alt);
    color: var(--color-ink);
    border: 1px solid var(--color-border-input);
  }

  .btn--secondary:hover {
    background-color: var(--color-canvas-alt-hover);
  }

  .btn--edit {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-primary);
    background-color: var(--color-bg-info);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .btn--edit:hover {
    background-color: var(--color-primary);
    color: var(--color-canvas);
  }

  .btn--nav {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
    line-height: 1;
    color: var(--color-primary);
    background-color: var(--color-bg-info);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .btn--nav:hover {
    background-color: var(--color-primary);
    color: var(--color-canvas);
  }

  .btn--check {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-positive);
    background-color: var(--color-bg-positive);
    border: 1px solid var(--color-positive);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .btn--check:hover {
    background-color: var(--color-positive);
    color: var(--color-canvas);
  }

  /* Delete button
  /* ------------------------------------------------------------------------ */

  .btn--delete {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-negative);
    background-color: var(--color-bg-negative);
    border: 1px solid var(--color-negative);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .btn--delete:hover {
    background-color: var(--color-negative);
    color: var(--color-canvas);
  }
}