.button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  padding: 2px 16px;
  user-select: none;
  font-size: 14px;
  cursor: pointer;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button.color-brand {
  --primary-color: var(--brand-500);
  --primary-color-hover: var(--brand-560);
  --primary-color-active: var(--brand-600);
  --primary-color-disabled: var(--brand-500);
  --secondary-color: #fff;
}

.button.color-primary {
  --primary-color: #4f545c;
  --primary-color-hover: #686d73;
  --primary-color-active: #72767d;
  --primary-color-disabled: #4f545c;
  --secondary-color: #fff;
}

.button.color-red {
  --primary-color: var(--button-danger-background);
  --primary-color-hover: var(--button-danger-background-hover);
  --primary-color-active: var(--button-danger-background-active);
  --primary-color-disabled: var(--button-danger-background-disabled);
  --secondary-color: hsl(0, calc(var(--saturation-factor, 1) * 0%), 100%);
}

.button.color-green {
  --primary-color: var(--button-positive-background);
  --primary-color-hover: var(--button-positive-background-hover);
  --primary-color-active: var(--button-positive-background-active);
  --primary-color-disabled: var(--button-positive-background-disabled);
  --secondary-color: hsl(120, calc(var(--saturation-factor, 1) * 0%), 100%);
}

.button.look-filled {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.button.look-filled:disabled {
  background-color: var(--primary-color-disabled);
}

.button.look-filled:not(:disabled):hover {
  background-color: var(--primary-color-hover);
}

.button.look-filled:not(:disabled):active {
  background-color: var(--primary-color-active);
}

.button.look-outlined {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.button.size-small {
  width: 60px;
  height: 32px;
  min-width: 60px;
  min-height: 32px;
}

.button.size-medium {
  width: 96px;
  height: 38px;
  min-width: 96px;
  min-height: 38px;
}

.button.size-large {
  width: 130px;
  height: 44px;
  min-width: 130px;
  min-height: 44px;
}

.button.full-width {
  width: 100%;
}

.button.grow {
  width: auto;
}