@w-btn:~ "w-btn";

.button-variant(@color, @background) {
  color: @color;
  background-color: @background;
  z-index: 1;
  &:hover {
    background-color: darken(@background, 10%);
  }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0 2px fadeout(@background, 74%);
  }
  &:hover {
    color: @color;
    background-color: darken(@background, 10%);
    z-index: 2;
  }
  &:active,
  &.active {
    color: @color;
    background-color: darken(@background, 20%);
    background-image: none;
  }
  &.disabled,
  &[disabled] {
    background-color: lighten(@background, 20%);
    z-index: 0;
  }
  &.@{w-btn}-basic {
    background-color: transparent !important;
    color: @background;
    &:hover {
      background-color: lighten(@background, 42%) !important;
    }
    &:active,
    &.active {
      color: @background;
      background-color: lighten(@background, 32%) !important;
      background-image: none;
    }
    &.disabled,
    &[disabled] {
      background-color: transparent !important;
      color: lighten(@background, 10%);
    }
  }
}

.button-size(@font-size, @icon-size, @line-height, @min-height) {
  font-size: @font-size;
  line-height: @line-height;
  min-height: @min-height;
  .w-icon {
    font-size: @icon-size;
  }
}

.@{w-btn} {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 5px 7px;
  position: relative;
  vertical-align: middle;
  text-align: left;
  line-height: 14px;
  font-size: 14px;
  min-width: 30px;
  min-height: 30px;
  color: #fff;
  transition: background-color 0.5s, opacity 1s;
  & > *:not(:last-child) {
    margin-right: 5px;
  }
  & + &:not(.block) {
    margin-left: 5px;
  }
  &.block {
    display: block;
    width: 100%;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    // opacity: .65;
    // box-shadow: none;
  }
  &-primary {
    .button-variant(#fff, #008ef0);
  }
  &-success {
    .button-variant(#fff, #28a745);
  }
  &-warning {
    .button-variant(#fff, #ffc107);
  }
  &-danger {
    .button-variant(#fff, #dc3545);
  }
  &-light {
    .button-variant(#393e48, #f8f9fa);
    &.disabled,
    &[disabled] {
      color: lighten(#393e48, 20%);
      z-index: 0;
    }
  }
  &-dark {
    .button-variant(#fff, #393e48);
  }
  &-link {
    .button-variant(#008ef0, transparent);
    &:hover {
      color: darken(#008ef0, 12%);
      text-decoration: underline;
    }
    &:active,
    &.active {
      color: darken(#008ef0, 32%);
      box-shadow: none;
      text-decoration: underline;
    }
    &.disabled,
    &[disabled] {
      background-color: lighten(#008ef0, 20%);
      z-index: 0;
    }
  }
  .w-icon {
    font-size: 16px;
  }
  &-large {
    .button-size(16px, 20px, 16px, 36px);
  }
  &-small {
    padding: 0 7px;
    .button-size(12px, 14px, 24px, 20px);
  }
  & .w-icon:not(:last-child) {
    margin-right: 5px;
  }
}