.btn {
  background-color: @button-background-color;
  color: @background-1;

  &:hover,
  &:focus,
  &:active {
    background-color: @button-background-color-hover;
    color: @background-1;
  }

  &:focus,
  &:focus:active {
    outline: none;
  }

  &.selected {
    background-color: @button-background-color-selected;
    color: @background-1;

    &:hover {
      color: @background-1;
    }
  }
}

.btn.btn-primary {
  .btn-color(@background-color-info);
}

.btn.btn-info {
  .btn-color(@background-color-info);
}

.btn.btn-success {
  .btn-color(@background-color-success);
}

.btn.btn-warning {
  .btn-color(@background-color-warning);
}

.btn.btn-error {
  .btn-color(@background-color-error);
}

.btn-color(@bg) {
  background-color: @bg;
  color: @background-1;

  &:hover,
  &:focus,
  &:active {
    background-color: lighten(@bg, 4%);
    color: @background-1;
  }

  &.selected {
    background-color: lighten(@bg, 4%);
    color: @background-1;

    &:focus,
    &:hover,
    &:active {
      background-color: lighten(@bg, 8%);
      color: @background-1;
    }
  }
}

.btn-group > .btn {
  border-color: @background-1;
}

.settings-view .config-menu .button-area > .btn {
  padding: 0;
}