/*
Buttons
===================================================================
######Basic button layout

Creates a basic button. Button type classes can be added by using multiple classes on the `.btn` element.

Adding the class `is--disabled` changes the element to a disabled button.
```
<button class="btn">
    Basic button
</button>

<button class="btn is--disabled">
    Disabled button
</button>
```
*/
//
.btn {
  .unitize-padding(2, 20);
  .unitize(line-height, 32);
  .border-radius(0px);

  .appearance();
  .unitize(@btn-font-size, 16, font-size);

  display: inline-block;
  position: relative;
  font-weight: @font-bold-weight;
  font-family: @font-headline-stack;
  text-align: left;

  /** Button icon font size */

  /** Larger icon */
  .is--large {
    @largeFontSize: @btn-font-size + 4;
    .unitize(@largeFontSize, 16, font-size);
  }

  &[class^="icon--"], &[class*=" icon--"]  {
      font-family: @sw-icon-fontname !important;
  }
}


//.is--inverted {
//  &.is--primary {
//    background-color: #fff;
//    color: @btn-primary-bottom-bg;
//    border: 1px solid @btn-primary-bottom-bg;
//    &:hover {
//      background: @btn-primary-hover-bg;
//      color: #fff;
//      border-color: @btn-primary-hover-bg;
//    }
//  }
//
//  &.is--secondary {
//    color: @btn-secondary-bottom-bg;
//    background-color: #fff;
//    border: 1px solid @btn-secondary-bottom-bg;
//    &:hover {
//      background-color: @btn-secondary-hover-bg;
//      color: #fff;
//    }
//  }
//}

