.button {
  background-color: var(--button-normal-background);
  border-color: var(--button-normal-border-color);
  color: var(--button-normal-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-width: 1px;
  border-style: solid;
  border-radius: 100px;

  padding-left: var(--button-padding-left-right);
  padding-right: var(--button-padding-left-right);
  font-size: var(--button-font-size);
  height: 36px;
  font-weight: 500;
  min-width: 76px;
  transition: background 100ms ease;
}

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

.button:active {
  background-color: var(--button-active-background);
  border-color: var(--button-active-border-color);
  color: var(--button-active-color);
}

.button:focus {
  border-color: var(--global-focus-border-color);
  box-shadow: var(--global-focus-box-shadow);
  outline: 0;
}

.button--primary {
  background-color: var(--button-normal-color);
  border-color: var(--button-normal-color);
  color: var(--button-normal-background);
  font-weight: 600;
}

.button--primary:hover {
  background-color: var(--button-hover-color);
  border-color: var(--button-normal-color);
  color: var(--button-normal-background);
}

.button--primary:focus {
  box-shadow: var(--global-focus-box-shadow), 0 0 0 1px var(--button-normal-background) inset;
}

.button--toolbar {
  width: 100%;
  border-color: transparent;
}

.button--toolbar:hover {
  background-color: var(--item-hover-background);
  border-color: transparent;
}

.button--toolbar:focus {
  border-color: var(--global-focus-border-color);
}

.button--toolbar:active {
  background-color: var(--button-active-background);
}

.button--danger, .button--danger:hover, .button--danger:active {
  color: var(--button-danger-color);
}

.button__icon svg {
  height: 14px;
  margin-right: 8px;
}
