button {
  align-items: center;
  appearance: none;
  background-color: light-dark(#f6f8fa, #212830);
  border: 0.0625rem solid;
  border-color: light-dark(#d1d9e0, #3d444d);
  border-radius: 0.375rem;
  box-shadow: 0px 1px 0px 0px light-dark(#1f23280a, #000000);
  color: light-dark(#25292e, #f0f6fc);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--base-text-weight-medium, 500);
  gap: var(--base-size-8, 0.5rem);
  height: 2rem;
  justify-content: space-between;
  min-width: max-content;
  padding: 0 0.75rem;
  text-align: center;
  text-decoration: none;
  transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-property: color, fill, background-color, border-color;
  user-select: none;

  &:hover {
    background-color: light-dark(#eff2f5, #262c36);
    border-color: light-dark(#d1d9e0, #3d444d);
  }

  &:active {
    background-color: light-dark(#e6eaef, #2a313c);
    border-color: light-dark(#d1d9e0, #3d444d);
  }
}