.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-md);
  color: var(--base900);
  background: var(--base100);
  padding: 8px 16px;
  border-radius: 4px;
  border: 0;
  outline: none;
  cursor: pointer;
  position: relative;
}

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

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

.label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
}

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

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

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

.action,
.action:active {
  color: var(--base50);
  background: var(--base900);
}

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

.danger,
.danger:active {
  color: var(--base50);
  background: var(--red500);
}

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

.light,
.light:active {
  color: var(--base900);
  background: transparent;
}

.light:hover {
  background: inherit;
}

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

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

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

.button:disabled {
  cursor: default;
  color: var(--base500);
  background: var(--base75);
}

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

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

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