.button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  text-decoration-line: none;
  vertical-align: middle;
  margin: 0px;
  overflow: hidden;
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  font-family: var(--fontFamilyBase);
  outline-style: none;
  padding: 5px var(--spacingHorizontalM);
  min-width: 96px;
  border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase300);
  transition-duration: var(--durationFaster);
  transition-property: background, border, color;
  transition-timing-function: var(--curveEasyEase);
}

.button:hover {
  color: var(--colorNeutralForeground1);
}

.appearance-primary {
  color: var(--colorNeutralForegroundOnBrand);
  background-color: var(--colorBrandBackground);
  border-color: transparent;
}

.appearance-primary:hover {
  color: var(--colorNeutralForegroundOnBrand);
}

.appearance-outline {
  background-color: transparent;
}

.appearance-outline:hover {
  border-color: var(--colorNeutralStroke1Hover);
  text-decoration: none;
}
