@import url(../var.less);

.button-size(@padding-vertical, @padding-horizontal, @font-size, @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border-radius: @border-radius;
  &.is-round {
    padding: @padding-vertical @padding-horizontal;
  }
}

.button-variant(@color, @background-color, @border-color) {
  color: @color;
  background-color: @background-color;
  border-color: @border-color;

  &:hover,
  &:focus {
    border-color: mix(@color-white, @border-color, 20%);
    background: mix(@color-white,@background-color, 20%);
    color: @color;
  }
  
  &:active {
    color: @color;
    border-color: mix(@color-black,@border-color, 12%);
    background: mix(@color-black,@background-color, 12%);
    outline: none;
  }

  &.is-active {
    color: @color;
    border-color: darken(@border-color, 12%);
    background: darken(@background-color, 12%);
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      cursor: not-allowed;
      background-image: none;
      color: @button-disabled-font-color;
      background-color: @button-disabled-background-color;
      border-color: @button-disabled-border-color;
    }
  }

  &.is-ghost {
    color: @background-color;
    border-color: @background-color;
    background-color: transparent!important;
    &:hover,
    &:focus {
      border-color: darken(@background-color, 10%);
      color: darken(@background-color, 10%);
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        cursor: not-allowed;
        background-image: none;
        color: @button-disabled-font-color;
        background-color: @button-disabled-background-color;
        border-color: @button-disabled-border-color;
      }
    }
  }
}