/* css/components/button.css */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-l);
    border: 1px solid transparent;
    border-radius: var(--radius-rond);
    font-weight: var(--fw-semi);
    line-height: var(--lh-serre);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--duree-rapide) var(--easing),
      border-color var(--duree-rapide) var(--easing);

    &:focus-visible {
      outline: 2px solid var(--couleur-focus);
      outline-offset: 2px;
    }
  }

  .btn--primary {
    background: var(--couleur-mundi);
    color: var(--couleur-sur-mundi);

    &:hover {
      background: color-mix(in oklab, var(--couleur-mundi), black 15%);
    }
  }
}