.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-normal);
  color: var(--gray900);
  background: var(--gray100);
  padding: 8px 16px;
  border-radius: 4px;
  border: 0;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

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

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

.large {
  font-size: var(--font-size-large);
}

.medium {
  font-size: var(--font-size-normal);
}

.small {
  font-size: var(--font-size-small);
}

.xsmall {
  font-size: var(--font-size-xsmall);
}

.action,
.action:active {
  color: var(--gray50);
  background: var(--gray900);
}

.action:hover {
  background: var(--gray800);
}

.danger {
  color: var(--gray50);
  background: var(--red500);
}

.danger:hover {
  background: var(--red400);
}

.light {
  background: transparent;
}

.light:hover {
  background: inherit;
}

.button .icon + div {
  margin-left: 10px;
}

.button.iconRight .icon {
  order: 1;
  margin-left: 10px;
}

.button.iconRight .icon + div {
  margin: 0;
}

.button:disabled {
  cursor: default;
  color: var(--gray500);
  background: var(--gray75);
}

.button:disabled:active {
  color: var(--gray500);
}

.button:disabled:hover {
  background: var(--gray75);
}

.button.light:disabled {
  background: var(--gray50);
}