.Button {
  position: relative;

  box-sizing: border-box;
  max-width: 200px;

  color: var(--color-text-neutral);

  transition: background-color var(--motion-transition-fast);

  /* dimension, variant, and shape */
  &:where(.size-m) {
    height: 36px;
    padding: 8px 12px;

    & :where(.ButtonText) {
      padding: 1px 4px;
    }
  }

  &:where(.variant-primary) {
    color: var(--color-text-neutral);
    background-color: var(--color-fill-grey);
    box-shadow: var(--state-input-default);
  }

  &:where(.variant-secondary) {
    background-color: var(--color-surface-low);
  }

  &:where(.shape-rectangle) {
    border-radius: var(--radius-10);
  }

  &:where(.shape-capsule) {
    border-radius: 9999px;
  }

  /* visual effect on interaction */
  &:where(:hover) {
    &:where(.variant-primary) {
      background-color: var(--color-fill-grey-heavy);
    }

    &:where(.variant-secondary) {
      background-color: var(--color-fill-neutral-lighter-hovered);
    }

    &:where([data-state='off']) {
      & :is(.ButtonIcon) {
        color: var(--color-icon-neutral-heavy);
      }
    }
  }

  &:where([data-state='on']) {
    color: var(--color-text-accent-blue);

    &:where(.variant-primary) {
      background-color: var(--color-fill-accent-blue);
      box-shadow: var(--state-input-default);
      box-shadow: 0 0 0 1px var(--color-fill-accent-blue-heavier) inset;
    }

    &:where(.variant-secondary) {
      background-color: var(--color-fill-accent-blue-heavy);
    }

    & :where(.ButtonText) {
      font-weight: var(--typography-text-weight-bold);
    }
  }

  &:where(:focus-visible) {
    box-shadow: var(--state-input-active);
  }

  /* internal components */
  &:where([data-state='off']) :where(.ButtonIcon) {
    color: var(--color-icon-neutral);
  }

  & :where(.ButtonContent) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* NOTE: this fixes container width when bold toggles */
  & :where(.ButtonText)::after {
    content: attr(data-text);

    overflow: hidden;
    display: block;

    height: 0;

    font-weight: var(--typography-text-weight-bold);
    color: transparent;

    visibility: hidden;
  }
}