.btn(@color) {
  background-color: transparent;
  border-color: @color;
  color: @color;

  &:hover,
  &:focus,
  &:active,
  &.active {
    background-color: @color;
    color: rgb(255, 255, 255);
  }
}

.btn-inversed(@color) {
  background-color: @color;
  border-color: @color;
  color: rgb(255, 255, 255);

  &:hover,
  &:focus,
  &:active,
  &.active {
    background-color: transparent;
    color: @color;
  }
}

.generated-btn(@n, @i: 1) when (@i =< @n) {
  @btn-name: extract(@brands-name, @i);
  @btn-color: extract(@brands-color, @i);
  &-@{btn-name} {
    .btn(@btn-color);
  }
  .generated-btn(@n, (@i + 1));
}

.generated-inversed-btn(@n, @i: 1) when (@i =< @n) {
  @btn-name: extract(@brands-name, @i);
  @btn-color: extract(@brands-color, @i);
  &-@{btn-name}-inversed {
    .btn-inversed(@btn-color);
  }
  .generated-inversed-btn(@n, (@i + 1));
}