LESS extend & background-position property

I can't figure out, why background-position property isn't working in my LESS code sample. Trying to use this property while overwriting default buttons style class for button's hover.

@green: #01eac6;
@blue: #0273dc;
@ocean: #01eac6;
@white: #fff;

@brand-primary: @blue;
@brand-primary-hover: @blue;
@brand-secondary: @ocean;

@transition-time: .3s;

.btn.btn-brand {
  background: @brand-primary linear-gradient(to bottom right, @brand-primary, @brand-secondary);
  background-size: 1px 200px;
  transition: background @transition-time;
  border: 0;

  &:hover:not(:disabled) {
    background-position: 100px;
  }
}

.custom-button--brand {
  &:extend(.btn.btn-brand);
  color: @white;
  background: @brand-primary;

  &:hover:not(:disabled) {
    &:extend(.btn.btn-brand:hover:not(:disabled));
    color: @white;
    background: @brand-primary linear-gradient(to bottom right, @brand-primary, @brand-secondary);
    background-size: 1px 200px;
  }
}

In Google Chrome Developer tool when I am inspecting this element on hover state, background-posistion is striped out. That's because I am later on resetting background and after that reset, background-position not used anymore for it?

How it looks in Google Chrome Developer tool:

Yeah, I was right! That's because background-position property is defined first and after it I am changing background which is resetting all previously defined properties related with background.