/*
  Buttons. Variables-as-slots so instances can match their exact original
  padding/colour without forking the component. --primary and --secondary
  cover the two dominant fills (blue solid, white with an inset gray ring).
  Every button shares one hover — a uniform brightness darken — so variants
  never need their own :hover colour.
*/

@layer components {
  .btn {
    --btn-padding: 0.5rem 1rem;
    --btn-gap: 0.5rem;
    --btn-radius: var(--radius-md);
    --btn-font-weight: var(--font-weight-medium);
    --btn-hover-brightness: 0.9;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--btn-font-weight);
    color: var(--btn-color, inherit);
    background-color: var(--btn-bg, transparent);
    cursor: pointer;
    text-decoration: none;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, filter;

    /* The one hover for every button: a uniform brightness darken. Guarded so it doesn't stick after a tap on touch. */
    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness));
      }
    }
  }

  .btn--primary {
    --btn-bg: var(--color-blue-600);
    --btn-color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }

  .btn--secondary {
    --btn-padding: 0.5rem 0.75rem;
    --btn-font-weight: var(--font-weight-semibold);
    --btn-bg: var(--color-white);
    --btn-color: var(--color-gray-800);
    box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-xs);
  }

  .btn--danger {
    --btn-bg: var(--color-red-600);
    --btn-color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }

  .btn--success {
    --btn-bg: var(--color-green-600);
    --btn-color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }

  .btn--neutral {
    --btn-bg: var(--color-gray-600);
    --btn-color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }

  .btn--dropdown {
    --btn-padding: 0.625rem 1rem;
    --btn-radius: var(--radius-xl);

    & [data-dropdown-target="arrow"] {
      margin-left: auto;
      font-size: var(--text-base);
      line-height: var(--text-base--line-height);
    }
  }

  .text-link {
    color: var(--color-blue-600);
    font-weight: var(--font-weight-medium);

    &:hover {
      color: var(--color-blue-800);
    }
  }
}