newsupernova/lib/web/css/docs/source/_buttons.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//  # Default button
//
//  Default style for buttons is set by the <code>.lib-button()</code> mixin. The mixin is called in <code>.lib-magento-reset()</code> or it can be called directly.
//
//  ## Default button large
//  ```html
//  <button class="example-button-1 example-button-2" type="button"><span>Button</span></button>
//  <button class="example-button-1 example-button-2 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-1 example-button-2 :active" type="button"><span>Active</span></button>
//  <button class="example-button-1 example-button-2" type="button" disabled><span>Disabled</span></button>
//  ```
//
//  ## Default button
//  ```html
//  <button class="example-button-1" type="button"><span>Button</span></button>
//  <button class="example-button-1 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-1 :active" type="button"><span>Active</span></button>
//  <button class="example-button-1" type="button" disabled><span>Disabled</span></button>
//  ```
//
//  ## Default button small
//  ```html
//  <button class="example-button-1 example-button-3" type="button"><span>Button</span></button>
//  <button class="example-button-1 example-button-3 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-1 example-button-3 :active" type="button"><span>Active</span></button>
//  <button class="example-button-1 example-button-3" type="button" disabled><span>Disabled</span></button>
//  ```
//

button {
    .lib-button(@_button-margin: 3px);
    border-radius: 3px;
    &:active,
    &:focus {
        box-shadow: inset 0 2px 1px rgba(0,0,0,.12);
    }
}

.example-button-1 {
    &.example-button-2 {
        .lib-button-l();
    }
    &.example-button-3 {
        .lib-button-s();
        border-radius: 0;
        color: @color-black;
        &:hover,
        &.active {
            color: @color-black;
        }
    }
}

//  # Button variables
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-font-family</th>
//        <td>@button__font-family</td>
//        <td class="vars_value">@font-family__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font family</td>
//      </tr>
//      <tr>
//        <th>@_button-font-size</th>
//        <td>@button__font-size</td>
//        <td class="vars_value">@font-size__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font size</td>
//      </tr>
//      <tr>
//        <th>@_button-font-weight</th>
//        <td>@button__font-weight</td>
//        <td class="vars_value">@font-weight__bold</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font weight</td>
//      </tr>
//      <tr>
//        <th>@_button-cursor</th>
//        <td>@button__cursor</td>
//        <td class="vars_value">pointer</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button cursor</td>
//      </tr>
//      <tr>
//        <th>@_button-display</th>
//        <td>@button__display</td>
//        <td class="vars_value">inline-block</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button display</td>
//      </tr>
//      <tr>
//        <th>@_button-disabled-opacity</th>
//        <td>@button__disabled__opacity</td>
//        <td class="vars_value">.5</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button disabled opacity</td>
//      </tr>
//      <tr>
//        <th>@_button-line-height</th>
//        <td>@button__line-height</td>
//        <td class="vars_value">@font-size__base + 2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button height</td>
//      </tr>
//      <tr>
//        <th>@_button-width</th>
//        <td>@button__width</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button width</td>
//      </tr>
//      <tr>
//        <th>@_button-margin</th>
//        <td>@button__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button margin</td>
//      </tr>
//      <tr>
//        <th>@_button-padding</th>
//        <td>@button__padding</td>
//        <td class="vars_value">7px 15px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button padding</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient</th>
//        <td>@button__gradient</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button has gradient background</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-direction</th>
//        <td>@button__gradient-direction</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | vertical | horizontal</td>
//        <td>Direction of button background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button default state</th>
//      </tr>
//      <tr>
//        <th>@_button-color</th>
//        <td>@button__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background</th>
//        <td>@button__background</td>
//        <td class="vars_value">#f2f2f2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border</th>
//        <td>@button__border</td>
//        <td class="vars_value">1px solid #cdcdcd</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button border</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-start</th>
//        <td>@button__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end</th>
//        <td>@button__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button hover state</th>
//      </tr>
//      <tr>
//        <th>@_button-color-hover</th>
//        <td>@button__hover__color</td>
//        <td class="vars_value">#555</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-hover</th>
//        <td>@button__hover__background</td>
//        <td class="vars_value">#e2e2e2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-hover</th>
//        <td>@button__hover__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button border</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
//        <td>@button__hover__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end-hover</th>
//        <td>@button__hover__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button active state</th>
//      </tr>
//      <tr>
//        <th>@_button-color-active</th>
//        <td>@button__active__color</td>
//        <td class="vars_value">@button__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-active</th>
//        <td>@button__active__background</td>
//        <td class="vars_value">@button__hover__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-active</th>
//        <td>@button__active__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button border</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-start-active<br /></th>
//        <td>@button__active__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end-active</th>
//        <td>@button__active__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button with icon</th>
//      </tr>
//      <tr>
//        <th>@_button-icon-use</th>
//        <td>@button-icon__use</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button has an icon</td>
//      </tr>
//      <tr>
//        <th>@_button-font-content</th>
//        <td>@button-icon__content</td>
//        <td class="vars_value">@icon-settings</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon symbol</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font</th>
//        <td>@button-icon__font</td>
//        <td class="vars_value">@icon-font</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon font</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-size</th>
//        <td>@button-icon__font-size</td>
//        <td class="vars_value">22px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon font size</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-line-height</th>
//        <td>@button-icon__line-height</td>
//        <td class="vars_value" nowrap="nowrap">@button-icon__font-size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon line height</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color</th>
//        <td>@button-icon__color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color-hover</th>
//        <td>@button-icon__hover__font-color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color-active</th>
//        <td>@button-icon__active__font-color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-margin</th>
//        <td>@button-icon__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon margin</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-vertical-align</th>
//        <td>@button-icon__vertical-align</td>
//        <td class="vars_value">top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon vertical align</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-position</th>
//        <td>@button-icon__position</td>
//        <td class="vars_value">@icon__position</td>
//        <td class="vars_value">'' | false | before | after</td>
//        <td>Button icon font position</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-text-hide</th>
//        <td>@button-icon__text-hide</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button icon text hide</td>
//      </tr>
//    </table>
//  </pre>
//
//  # Button as an icon
//
//  To make a button look like an icon you need to:
//
//  enable icon:
//  ```css
//  @_button-icon-use: true
//  ```
//  set the font icon code:
//  ```css
//  @_button-font-content: @icon-cart
//  ```
//  hide button text:
//  ```css
//  @_button-icon-font-text-hide: true
//  ```
//
//  ```html
//    <button class="example-button-10" type="button">
//        <span>Add to cart</span>
//    </button>
//    <button class="example-button-10 :hover" type="button">
//        <span>Add to cart</span>
//    </button>
//    <button class="example-button-10 :active" type="button">
//        <span>Add to cart</span>
//    </button>
//  ```
//

.example-button-10 {
    .lib-button(
        @_button-margin: 3px,
        @_button-icon-use: true,
        @_button-font-content: @icon-cart,
        @_button-icon-font-text-hide: true
    );
    .lib-button-reset();
}

//  # Button with an icon on the left or right side of the text
//
//  <code>@_button-icon-font-position</code> variable is used to set up the icon position
//
//  Use <code>before</code> to set up button icon position on the left:
//  ```css
//  @_button-icon-font-position: before
//  ```
//
//  ```html
//    <button class="example-button-11" type="button" title="Add to cart">
//        <span>Button</span>
//    </button>
//    <button class="example-button-11 :hover" type="button" title="Add to cart">
//        <span>Hover</span>
//    </button>
//    <button class="example-button-11 :active" type="button" title="Add to cart">
//        <span>Active</span>
//    </button>
//    <button class="example-button-11 disabled" type="button" title="Add to cart">
//        <span>Disabled</span>
//    </button>
//  ```
//  Use <code>after</code> to set up button icon position on the right:
//  ```css
//  @_button-icon-font-position: after
//  ```
//  ```html
//    <button class="example-button-12" type="button" title="Add to cart">
//        <span>Button</span>
//    </button>
//    <button class="example-button-12 :hover" type="button" title="Add to cart">
//        <span>Hover</span>
//    </button>
//    <button class="example-button-12 :active" type="button" title="Add to cart">
//        <span>Active</span>
//    </button>
//    <button class="example-button-12 disabled" type="button" title="Add to cart">
//        <span>Disabled</span>
//    </button>
//  ```
//

.example-button-11 {
    .lib-button(
        @_button-margin: 3px,
        @_button-icon-use: true,
        @_button-font-content: @icon-cart,
        @_button-icon-font-position: before
    );
}

.example-button-12 {
    .lib-button(
        @_button-margin: 3px,
        @_button-icon-use: true,
        @_button-font-content: @icon-cart,
        @_button-icon-font-position: after
   );
}

//  # Button with fixed width
//
//  To get a fixed width button, you need to set:
//  ```css
//  @_button-width: 100px
//  ```
//
//  ```html
//    <button class="example-button-13" type="button" title="Add to cart">
//        <span>Button</span>
//    </button>
//    <button class="example-button-13 :hover" type="button" title="Add to cart">
//        <span>Hover</span>
//    </button>
//    <button class="example-button-13 :active" type="button" title="Add to cart">
//        <span>Active</span>
//    </button>
//    <button class="example-button-13 disabled" type="button" title="Add to cart">
//        <span>Disabled</span>
//    </button>
//  ```
//

.example-button-13 {
    .lib-button(@_button-width: 100px, @_button-margin: 3px);
}

//  # Primary button
//
//  The <code>.lib-button-primary()</code> mixin is used to create a **primary button**. By default it uses Primary button variables from _variables.less file.
//
//  ##Primary button big
//  ```html
//  <button class="example-button-4 example-button-5" type="button"><span>Button</span></button>
//  <button class="example-button-4 example-button-5 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-4 example-button-5 :active" type="button"><span>Active</span></button>
//  <button class="example-button-4 example-button-5" type="button" disabled><span>Disabled</span></button>
//  ```
//
//  ##Primary button
//  ```html
//  <button class="example-button-4" type="button"><span>Button</span></button>
//  <button class="example-button-4 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-4 :active" type="button"><span>Active</span></button>
//  <button class="example-button-4 disabled" type="button"><span>Disabled</span></button>
//  ```
//
//  ##Primary button small
//  ```html
//  <button class="example-button-4 example-button-6" type="button"><span>Button</span></button>
//  <button class="example-button-4 example-button-6 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-4 example-button-6 :active" type="button"><span>Active</span></button>
//  <button class="example-button-4 example-button-6" type="button" disabled><span>Disabled</span></button>
//  ```
//

.example-button-4 {
    .lib-button-primary(
        @_button-margin: 3px
    );
    &:active {
        box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
    }
    &.example-button-5 {
        .lib-button-l(@_button-l-padding: 7px 35px);
    }
    &.example-button-6 {
        .lib-button-s();
        color: @color-white;
        &:hover,
        &.active {
            color: @color-white;
        }
    }
}

//  # Primary button variables
//
//  In the variables list primary buttons are configured with <code>@button-primary__</code> prefix. So for example to configure primary button background you should use <code>@_button-background</code> variable of the mixin or <code>@button-primary__background</code> of the global variables list.
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_button-line-height</th>
//            <td>@button-primary__line-height</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button line-height</td>
//        </tr>
//        <tr>
//            <th>@_button-width</th>
//            <td>@button-primary__width</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button width</td>
//        </tr>
//        <tr>
//            <th>@_button-margin</th>
//            <td>@button-primary__margin</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button margin</td>
//        </tr>
//        <tr>
//            <th>@_button-padding</th>
//            <td>@button-primary__padding</td>
//            <td class="vars_value">@button__padding</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button padding</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient</th>
//            <td>@button-primary__gradient</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>Button has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-direction</th>
//            <td>@button-primary__gradient-direction</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | vertical | horizontal</td>
//            <td>Direction of button background gradient (if there is any)</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button default state</th>
//        </tr>
//        <tr>
//            <th>@_button-background</th>
//            <td>@button-primary__background</td>
//            <td class="vars_value">#1979c3</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border</th>
//            <td>@button-primary__border</td>
//            <td class="vars_value">1px solid #1979c3</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color</th>
//            <td>@button-primary__color</td>
//            <td class="vars_value">#fff</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button text color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-start</th>
//            <td>@button-primary__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end</th>
//            <td>@button-primary__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient background end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button hover state</th>
//        </tr>
//        <tr>
//            <th>@_button-background-hover</th>
//            <td>@button-primary__hover__background</td>
//            <td class="vars_value">#006bb4</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border-hover</th>
//            <td>@button-primary__hover__border</td>
//            <td class="vars_value">1px solid #006bb4</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color-hover</th>
//            <td>@button-primary__hover__color</td>
//            <td class="vars_value">@button-primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
//            <td>@button-primary__hover__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end-hover</th>
//            <td>@button-primary__hover__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button gradient background end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button active state</th>
//        </tr>
//        <tr>
//            <th>@_button-background-active</th>
//            <td>@button-primary__active__background</td>
//            <td class="vars_value">@button-primary__hover__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border-active</th>
//            <td>@button-primary__active__border</td>
//            <td class="vars_value">@button-primary__hover__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color-active</th>
//            <td>@button-primary__active__color</td>
//            <td class="vars_value">@button-primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button text color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-start-active</th>
//            <td>@button-primary__active__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end-active</th>
//            <td>@button-primary__active__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button gradient background end color</td>
//        </tr>
//    </table>
//  </pre>

//  # Button with gradient background
//
//  The <code>.lib-button()</code> mixin can get its values from _variables.less file or directly
//  ```html
//  <button class="example-button-7" type="button"><span>Button</span></button>
//  <button class="example-button-7 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-7 :active" type="button"><span>Active</span></button>
//  <button class="example-button-7 disabled" type="button"><span>Disabled</span></button>
//  ```
//

.example-button-7 {
    .lib-button(
        @_button-margin: 3px,
        @_button-padding: @button__padding,
        @_button-gradient-color-start: #1979c3,
        @_button-gradient-color-end: #006bb4,
        @_button-color: @color-white,
        @_button-gradient-color-start-hover: #006bb4,
        @_button-gradient-color-end-hover: #1979c3,
        @_button-color-hover: @color-white,
        @_button-gradient-color-start-active: #006bb4,
        @_button-gradient-color-end-active: #006bb4,
        @_button-color-active: @color-white,
        @_button-gradient: true,
        @_button-gradient-direction: vertical,
        @_button-border: @button-primary__border,
        @_button-border-hover: @button-primary__hover__border,
        @_button-border-active: @button-primary__active__border
    );
    border-radius: 3px;
    &:active {
        box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
    }
}

//  # Button as a link
//
//  The <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.
//
//  ```html
//  <button class="example-button-8" type="button"><span>Button</span></button>
//  <button class="example-button-8 :visited" type="button"><span>Visited</span></button>
//  <button class="example-button-8 :hover" type="button"><span>Hover</span></button>
//  <button class="example-button-8 :active" type="button"><span>Active</span></button>
//  <button class="example-button-8 disabled" type="button"><span>Disabled</span></button>
//  ```
//

.example-button-8 {
    .lib-button-as-link();
    font-weight: normal;
    &:active {
        box-shadow: none;
    }
}

//  # Button as a link variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_link-color</th>
//            <td>@link__color</td>
//            <td class="vars_value">@link-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link color</td>
//        </tr>
//        <tr>
//            <th>@_link-color-hover</th>
//            <td>@link__hover__color</td>
//            <td class="vars_value">@link-color-hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link hovered color</td>
//        </tr>
//        <tr>
//            <th>@_line-height</th>
//            <td>@line-height__base</td>
//            <td class="vars_value">@line-height-base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link line height</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td>-</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link margin</td>
//        </tr>
//        <tr>
//            <th>@_padding</th>
//            <td>-</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link padding</td>
//        </tr>
//        <tr>
//            <th>@_disabled_opacity</th>
//            <td>@button__disabled__opacity</td>
//            <td class="vars_value">.5</td>
//            <td class="vars_value">range between .1 and .9</td>
//            <td>Button as a link opacity</td>
//        </tr>
//    </table>

//  # Link as a button
//
//  The <code>.lib-link-as-button()</code> mixin is used to reset link styles (text-decoration and display inline). Then to make it look like a button, you need to add the <code>.lib-button()</code> mixin with appropriate parameters.
//
//  ```html
//  <a href="#" class="example-button-9"><span>Button</span></a>
//  <a href="#" class="example-button-9 :hover"><span>Hover</span></a>
//  <a href="#" class="example-button-9 :active"><span>Active</span></a>
//  <a href="#" class="example-button-9 disabled"><span>Disabled</span></a>
//  ```
//

.example-button-9 {
    .lib-link-as-button();
    .lib-button();
    margin: 3px;
    border-radius: 3px;
    font-weight: bold;
    &:active {
        box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
    }
}

//  # Button reset
//
//  The <code>.lib-button-reset()</code> mixin is used to fully reset button styles.
//
//  ```html
//  <button class="example-button-14" type="button"><span>Button with reset styles</span></button>
//  ```
//

.example-button-14 {
    .lib-button-reset();
}

//  # Button revert secondary color
//
//  The <code>.lib-button-revert-secondary-color()</code> mixin is used to revert button styles (primary for example) to secondary color styles.
//  Also can be passed any color, background and border if needed.
//
//  ```html
//  <button class="example-button-15" type="button"><span>Reverted color</span></button>
//  <button class="example-button-16" type="button"><span>Custom colors</span></button>
//  ```
//

.example-button-15 {
    .lib-button-primary();
    .lib-button-revert-secondary-color();
}

//  # Button revert secondary color variables
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-color</th>
//        <td>@button__color</td>
//        <td class="vars_value">@button__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button color</td>
//      </tr>
//      <tr>
//        <th>@_button-background</th>
//        <td>@button__background</td>
//        <td class="vars_value">@button__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border</th>
//        <td>@button__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button border</td>
//      </tr>
//      <tr>
//        <th>@_button-color-hover</th>
//        <td>@button__hover__color</td>
//        <td class="vars_value">@button__hover__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-hover</th>
//        <td>@button__hover__background</td>
//        <td class="vars_value">@button__hover__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-hover</th>
//        <td>@button__hover__border</td>
//        <td class="vars_value">@button__hover__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover border</td>
//      </tr>
//      <tr>
//        <th>@_button-color-active</th>
//        <td>@button__active__color</td>
//        <td class="vars_value">@button__active__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-active</th>
//        <td>@button__active__background</td>
//        <td class="vars_value">@button__active__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-active</th>
//        <td>@button__active__border</td>
//        <td class="vars_value">@button__active__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active border</td>
//      </tr>
//    </table>
//  </pre>

//  # Button revert secondary size
//
//  The <code>.lib-button-revert-secondary-size()</code> mixin is used to revert button sizes to secondary button sizes.
//  Also can be passed font-size, line-height and padding if needed.
//
//  ```html
//  <button class="example-button-17" type="button"><span>Reverted size</span></button>
//  <button class="example-button-18" type="button"><span>Custom sizes</span></button>
//  ```
//

.example-button-17 {
    .lib-button-l();
    .lib-button-revert-secondary-size();
}
.example-button-18 {
    .lib-button-revert-secondary-size(
        @_button-font-size: 10px,
        @_button-line-height: 12px,
        @_button-padding: 4px 10px
    );
}

//  # Button revert secondary size variables
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-font-size</th>
//        <td>@button__font-size</td>
//        <td class="vars_value">@button__font-size</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button font size</td>
//      </tr>
//      <tr>
//        <th>@_button-line-height</th>
//        <td>@button__line-height</td>
//        <td class="vars_value">@button__line-height</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button line-height</td>
//      </tr>
//      <tr>
//        <th>@_button-padding</th>
//        <td>@button__padding</td>
//        <td class="vars_value">@button__padding</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button padding</td>
//      </tr>
//    </table>
//  </pre>