@layer components {
  ._button_1p1kv_2 {
    cursor: pointer;
    display: inline-flex;
    gap: var(--osfk-size-8);
    align-items: center;
    width: fit-content;
    position: relative;
  }
  :where(._button_1p1kv_2)::after {
    cursor: inherit;
    content: "";
    position: absolute;
    inset: calc(-1 * 0.5em) calc(-1 * 0.5em) calc(-1 * 0.5em) calc(-1 * 0.5em);
    min-width: 2.2rem;
    min-height: 2.2rem;
    margin: auto;
  }
  ._button_1p1kv_2:disabled {
    cursor: auto;
    opacity: 50%;
  }
  ._button_1p1kv_2[data-variant=fill], ._button_1p1kv_2[data-variant=outline] {
    padding-block: var(--osfk-size-8);
    padding-inline: var(--osfk-size-20);
    border-radius: 0.5rem;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  :where(._button_1p1kv_2[data-variant=fill], ._button_1p1kv_2[data-variant=outline]) {
    font-family: var(--osfk-font-primary);
    font-weight: 500;
    line-height: 1.3;
    font-size: 0.9rem;
  }
  ._button_1p1kv_2[data-variant=link] {
    display: inline-block;
  }
  ._button_1p1kv_2[data-variant=link]:focus-visible {
    outline-offset: 0.5em !important;
  }
  ._button_1p1kv_2[data-variant=fill] {
    --button-bg: var(--surface-button, var(--surface-accent));
    --button-fg: var(--surface-button-foreground, contrast(var(--button-bg)));
    border: var(--osfk-size-1) solid var(--button-bg);
    color: var(--button-fg);
    background-color: var(--button-bg);
  }
  ._button_1p1kv_2[data-variant=fill]:hover:not(:disabled) {
    color: var(--button-bg);
    background-color: transparent;
  }
  ._button_1p1kv_2[data-variant=outline] {
    border: var(--osfk-size-1) solid currentColor;
    color: var(--surface-foreground);
    background-color: transparent;
  }
  ._button_1p1kv_2[data-variant=outline]:hover:not(:disabled) {
    color: var(--surface-background);
    background-color: var(--surface-foreground);
  }
}