@layer components {
  .btn {
    align-items: center;
    background-color: var(--btn-background, var(--color-surface));
    block-size: var(--btn-block-size, auto);
    border: 1px solid var(--btn-border-color, var(--color-border));
    border-radius: var(--btn-radius, var(--rounded-md));
    box-shadow: var(--btn-box-shadow, var(--shadow-xs));
    color: var(--btn-color, var(--color-text));
    column-gap: var(--size-2);
    cursor: default;
    display: inline-flex;
    font-size: var(--btn-font-size, var(--text-sm));
    font-weight: var(--btn-font-weight, var(--font-medium));
    inline-size: var(--btn-inline-size, auto);
    justify-content: var(--btn-justify-content, center);
    padding: var(--btn-padding, .375rem 1rem);
    position: relative;
    white-space: nowrap;

    &:hover {
      background-color: var(--btn-hover-color, var(--color-border-light));
    }

    &:focus-visible {
      outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark);
    }

    &:is(:disabled, [aria-disabled="true"]) {
      opacity: var(--opacity-50);
      pointer-events: none;
    }
  }

  .btn--primary {
    --btn-background: var(--color-primary);
    --btn-border-color: transparent;
    --btn-color: var(--color-text-reversed);
    --btn-hover-color: rgb(from var(--color-primary) r g b / .9);
  }

  .btn--secondary {
    --btn-background: var(--color-secondary);
    --btn-border-color: transparent;
    --btn-hover-color: rgb(from var(--color-secondary) r g b / .8);
  }

  .btn--borderless {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: none;
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: transparent;
    --btn-color: white;
    --btn-hover-color: rgb(from var(--color-positive) r g b / .9);
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: transparent;
    --btn-color: white;
    --btn-hover-color: rgb(from var(--color-negative) r g b / .9);
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: none;
    --btn-hover-color: transparent;
    --btn-padding: 0;
  }

  .btn--icon {
    --btn-padding: var(--size-2);
  }

  [aria-busy="true"] .btn--busy:disabled {
    >* {
      visibility: hidden;
    }

    &::after {
      animation: spin 1s linear infinite;
      background-color: currentColor;
      block-size: var(--size-5);
      content: "";
      inline-size: var(--size-5);
      mask-image: url("/assets/loading-b8fb367c.svg");
      mask-size: cover;
      position: absolute;
    }
  }
}