@layer components {
  :root {
    /* Default */
    --button-color: hsl(0, 0%, 20%);
    --button-background-color: hsl(0, 0%, 90%);
    --button-background-hover: hsl(0, 0%, 84%);

    /* Primary — Teal */
    --button-primary-color: hsl(0, 0%, 100%);
    --button-primary-background-color: hsl(162, 40%, 42%);
    --button-primary-background-hover: hsl(162, 40%, 36%);

    /* Secondary — Slate blue */
    --button-secondary-color: hsl(0, 0%, 100%);
    --button-secondary-background-color: hsl(215, 45%, 48%);
    --button-secondary-background-hover: hsl(215, 45%, 42%);

    /* Danger — Warm red */
    --button-danger-color: hsl(0, 0%, 100%);
    --button-danger-background-color: hsl(4, 65%, 52%);
    --button-danger-background-hover: hsl(4, 65%, 46%);

    /* Warning — Amber */
    --button-warning-color: hsl(0, 0%, 20%);
    --button-warning-background-color: hsl(42, 90%, 55%);
    --button-warning-background-hover: hsl(42, 90%, 48%);

    /* Success — Green */
    --button-success-color: hsl(0, 0%, 100%);
    --button-success-background-color: hsl(145, 45%, 42%);
    --button-success-background-hover: hsl(145, 45%, 36%);

    /* Ghost — transparent mit Border */
    --button-ghost-color: hsl(0, 0%, 30%);
    --button-ghost-background-color: transparent;
    --button-ghost-background-hover: hsl(0, 0%, 95%);
  }

  button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 1rem;
    font-family: inherit;
    padding: 5px 1rem;
    border: 2px solid #9f9f9f;
    border-radius: 1rem;
    color: var(--button-color);
    background-color: var(--button-background-color);
    &:hover {
      background-color: var(--button-background-hover);
    }
    &:focus {
      outline-color: currentColor;
      outline-offset: 4px;
    }
    &:has(> .icon:first-child) {
      padding-left: 0.5rem;
    }
  }

  .btn-small {
    font-size: 0.875rem;
    padding: 2px 0.75rem;
    border-radius: 0.75rem;
    &:has(> .icon:first-child) {
      padding-left: 0.375rem;
    }
  }

  .btn-primary {
    --button-color: var(--button-primary-color);
    --button-background-color: var(--button-primary-background-color);
    --button-background-hover: var(--button-primary-background-hover);
    border: 2px solid var(--button-primary-background-color);
    &:focus {
      outline-color: var(--button-primary-background-hover);
    }
  }
}