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

.button:hover {
  background: #eaeaea;
}

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

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

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

.action {
  color: var(--gray50) !important;
  background: var(--gray900) !important;
}

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

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

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