BUTTON {
  outline: none;
}
BUTTON.btn {
  border-radius: 10px;
  padding: 10px 10px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  border: solid 2px;
  text-transform: uppercase;
}
BUTTON.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
BUTTON.btn.primary {
  background: var(--btn-primary-background);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border);
}
BUTTON.btn.primary:disabled {
  opacity: var(--btn-primary-opacity-disabled);
}
BUTTON.btn.secondary {
  background: var(--btn-secondary-background);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}
BUTTON.btn.secondary:disabled {
  opacity: var(--btn-secondary-opacity-disabled);
}
BUTTON.btn.danger {
  background: var(--btn-danger-background);
  color: var(--btn-danger-color);
  border: none;
}
BUTTON.btn.icon {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  padding: 0px;
  overflow: hidden;
}
BUTTON.btn.icon.noborder {
  border: none;
}
BUTTON.btn.icon > IMG {
  width: 30px;
  height: 30px;
  background-color: transparent;
}
BUTTON.btn.icon > IMG.active {
  display: none;
}
BUTTON.btn.icon > IMG.normal {
  display: inline;
}
BUTTON.btn.icon.little {
  height: 30px;
  width: 30px;
  border-radius: 30px;
}
BUTTON.btn.icon.little > IMG {
  width: 15px;
  height: 15px;
}
BUTTON.btn.icon.active {
  border: solid 1px var(--btn-active-background-color);
}
BUTTON.btn.icon.active > IMG.active {
  display: inline;
}
BUTTON.btn.icon.active > IMG.normal {
  display: none;
}

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