@layer components {
  .rs-button {
    --rs-button-p-v: var(--rs-unit-x2);
    --rs-button-p-h: var(--rs-unit-x3);
    --rs-button-gap: var(--rs-unit-x2);
    --rs-button-line-height: var(--rs-line-height-body-3);
    --rs-button-font-size: var(--rs-font-size-body-3);
    --rs-button-radius: var(--rs-radius-small);
    --rs-button-bg: var(--rs-color-background-neutral);
    --rs-button-fg: var(--rs-color-on-background-neutral);
    --rs-button-border: transparent;
    --rs-button-border-width: 0px;
    --rs-button-highlight-color: var(--rs-button-fg);
    --rs-button-hover-opacity: 0.08;
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rs-button-gap);
    min-block-size: calc(
      var(--rs-button-line-height) + var(--rs-button-p-v) * 2
    );
    min-inline-size: calc(
      var(--rs-button-line-height) + var(--rs-button-p-h) * 2 -
        var(--rs-unit-x2)
    );
    border: var(--rs-button-border-width) solid var(--rs-button-border);
    border-radius: var(--rs-button-radius);
    padding: calc(var(--rs-button-p-v) - var(--rs-button-border-width))
      calc(var(--rs-button-p-h) - var(--rs-button-border-width));
    background: var(--rs-button-bg);
    color: var(--rs-button-fg);
    font-family: var(--rs-font-family-body);
    font-size: var(--rs-button-font-size);
    font-weight: var(--rs-font-weight-medium);
    line-height: var(--rs-button-line-height);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      border-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard),
      color var(--rs-duration-fast) var(--rs-easing-standard),
      transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--rs-button-highlight-color, var(--rs-button-fg));
    opacity: 0;
    transition: opacity var(--rs-duration-fast) var(--rs-easing-standard);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-button:hover:not(:disabled, [aria-disabled="true"])::before {
      opacity: var(--rs-button-hover-opacity);
    }
  }

  .rs-button:is(:active, [aria-pressed="true"]):not(
      :disabled,
      [aria-disabled="true"]
    )::before {
    opacity: calc(var(--rs-button-hover-opacity) + 0.06);
  }

  .rs-button:focus-visible {
    outline: 0;
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-button:disabled,
  .rs-button[aria-disabled="true"] {
    --rs-button-bg: var(--rs-color-background-disabled);
    --rs-button-fg: var(--rs-color-foreground-disabled);
    --rs-button-border: var(--rs-color-border-disabled);
    cursor: not-allowed;
  }

  .rs-button[data-size="small"] {
    --rs-button-p-v: var(--rs-unit-x1);
    --rs-button-p-h: var(--rs-unit-x2);
    --rs-button-gap: var(--rs-unit-x1);
    --rs-button-line-height: var(--rs-line-height-body-3);
    --rs-button-font-size: var(--rs-font-size-body-3);
  }

  .rs-button[data-size="large"] {
    --rs-button-p-v: var(--rs-unit-x3);
    --rs-button-p-h: var(--rs-unit-x4);
    --rs-button-line-height: var(--rs-line-height-body-2);
    --rs-button-font-size: var(--rs-font-size-body-2);
    --rs-button-radius: var(--rs-radius-medium);
  }

  .rs-button[data-rounded] {
    --rs-button-radius: var(--rs-radius-circular);
  }

  .rs-button[data-full-width] {
    inline-size: 100%;
  }

  .rs-button[data-tone="primary"] {
    --rs-button-bg: var(--rs-color-background-primary);
    --rs-button-fg: var(--rs-color-on-background-primary);
    --rs-button-hover-opacity: 0.08;
  }

  .rs-button[data-tone="critical"] {
    --rs-button-bg: var(--rs-color-background-critical);
    --rs-button-fg: var(--rs-color-on-background-critical);
  }

  .rs-button[data-tone="positive"] {
    --rs-button-bg: var(--rs-color-background-positive);
    --rs-button-fg: var(--rs-color-on-background-positive);
  }

  .rs-button[data-variant="faded"] {
    --rs-button-group-separator-color: var(--rs-color-border-neutral);
    --rs-button-bg: var(--rs-color-background-neutral-faded);
    --rs-button-fg: var(--rs-color-foreground-neutral);
    --rs-button-hover-opacity: 0.04;
  }

  .rs-button[data-variant="faded"][data-tone="primary"] {
    --rs-button-group-separator-color: var(--rs-color-border-primary-faded);
    --rs-button-bg: var(--rs-color-background-primary-faded);
    --rs-button-fg: var(--rs-color-foreground-primary);
  }

  .rs-button[data-variant="faded"][data-tone="critical"] {
    --rs-button-group-separator-color: var(--rs-color-border-critical-faded);
    --rs-button-bg: var(--rs-color-background-critical-faded);
    --rs-button-fg: var(--rs-color-foreground-critical);
  }

  .rs-button[data-variant="faded"][data-tone="positive"] {
    --rs-button-group-separator-color: var(--rs-color-border-positive-faded);
    --rs-button-bg: var(--rs-color-background-positive-faded);
    --rs-button-fg: var(--rs-color-foreground-positive);
  }

  .rs-button[data-variant="outline"] {
    --rs-button-group-separator-color: var(--rs-color-border-neutral);
    --rs-button-highlight-color: var(--rs-color-background-neutral);
    --rs-button-border-width: 1px;
    --rs-button-bg: transparent;
    --rs-button-fg: var(--rs-color-foreground-neutral);
    --rs-button-border: var(--rs-color-border-neutral);
    --rs-button-hover-opacity: 0.24;
  }

  .rs-button[data-variant="outline"][data-tone="primary"] {
    --rs-button-group-separator-color: var(--rs-color-border-primary-faded);
    --rs-button-highlight-color: var(--rs-color-background-primary);
    --rs-button-fg: var(--rs-color-foreground-primary);
    --rs-button-border: var(--rs-color-border-primary-faded);
    --rs-button-hover-opacity: 0.06;
  }

  .rs-button[data-variant="outline"][data-tone="critical"] {
    --rs-button-group-separator-color: var(--rs-color-border-critical-faded);
    --rs-button-highlight-color: var(--rs-color-background-critical);
    --rs-button-fg: var(--rs-color-foreground-critical);
    --rs-button-border: var(--rs-color-border-critical-faded);
    --rs-button-hover-opacity: 0.06;
  }

  .rs-button[data-variant="outline"][data-tone="positive"] {
    --rs-button-group-separator-color: var(--rs-color-border-positive-faded);
    --rs-button-highlight-color: var(--rs-color-background-positive);
    --rs-button-fg: var(--rs-color-foreground-positive);
    --rs-button-border: var(--rs-color-border-positive-faded);
    --rs-button-hover-opacity: 0.06;
  }

  .rs-button[data-variant="ghost"] {
    --rs-button-group-separator-color: var(--rs-color-border-neutral-faded);
    --rs-button-highlight-color: var(--rs-color-background-neutral);
    --rs-button-bg: transparent;
    --rs-button-fg: var(--rs-color-foreground-neutral);
    --rs-button-hover-opacity: 0.32;
  }

  .rs-button[data-variant="ghost"][data-tone="primary"] {
    --rs-button-highlight-color: var(--rs-color-background-primary);
    --rs-button-fg: var(--rs-color-foreground-primary);
    --rs-button-hover-opacity: 0.12;
  }

  .rs-button[data-variant="ghost"][data-tone="critical"] {
    --rs-button-highlight-color: var(--rs-color-background-critical);
    --rs-button-fg: var(--rs-color-foreground-critical);
    --rs-button-hover-opacity: 0.12;
  }

  .rs-button[data-variant="ghost"][data-tone="positive"] {
    --rs-button-highlight-color: var(--rs-color-background-positive);
    --rs-button-fg: var(--rs-color-foreground-positive);
    --rs-button-hover-opacity: 0.12;
  }

  .rs-button-group {
    display: inline-flex;
  }

  .rs-button-group > .rs-button {
    inline-size: auto;
    flex-shrink: 0;
    border-radius: 0;
  }

  .rs-button-group > .rs-button:not(:first-child) {
    border-inline-start: 1px solid var(--rs-button-group-separator-color);
    padding-inline-start: calc(var(--rs-button-p-h) - 1px);
  }

  .rs-button-group > .rs-button:not(:last-child) {
    border-inline-end: 0 solid var(--rs-button-group-separator-color);
    padding-inline-end: var(--rs-button-p-h);
  }

  .rs-button-group
    > .rs-button:is(:hover, :focus-visible, :active, [aria-pressed="true"]) {
    z-index: 1;
  }

  .rs-button-group
    > .rs-button:is(:hover, :focus-visible, :active, [aria-pressed="true"]):not(
      :last-child
    )::after {
    content: "";
    position: absolute;
    inset-block: calc(var(--rs-button-border-width) * -1);
    inset-inline-end: -1px;
    border-inline-end: 1px solid var(--rs-button-group-separator-color);
    pointer-events: none;
  }

  .rs-button-group
    > .rs-button:is(:hover, :focus-visible, :active, [aria-pressed="true"]):not(
      :last-child
    )
    + .rs-button {
    border-inline-start-width: 0;
    padding-inline-start: var(--rs-button-p-h);
  }

  .rs-button-group > .rs-button:first-child {
    border-start-start-radius: var(--rs-button-radius);
    border-end-start-radius: var(--rs-button-radius);
  }

  .rs-button-group > .rs-button:last-child {
    border-start-end-radius: var(--rs-button-radius);
    border-end-end-radius: var(--rs-button-radius);
  }
}