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

//
//  Buttons
//  _____________________________________________

//
//  Button with solid or picture background
//  ---------------------------------------------

.lib-button(
    @_button-font-family: @button__font-family,
    @_button-font-size: @button__font-size,
    @_button-font-weight: @button__font-weight,
    @_button-cursor: @button__cursor,
    @_button-display: @button__display,
    @_button-disabled-opacity: @button__disabled__opacity,
    @_button-line-height: @button__line-height,
    @_button-width: @button__width,
    @_button-margin: @button__margin,
    @_button-padding: @button__padding,
    @_button-color: @button__color,
    @_button-background: @button__background,
    @_button-border: @button__border,

    @_button-color-hover: @button__hover__color,
    @_button-background-hover: @button__hover__background,
    @_button-border-hover: @button__hover__border,
    @_button-color-active: @button__active__color,
    @_button-background-active: @button__active__background,
    @_button-border-active: @button__active__border,

    @_button-gradient: @button__gradient,
    @_button-gradient-direction: @button__gradient-direction,
    @_button-gradient-color-start: @button__gradient-color-start,
    @_button-gradient-color-end: @button__gradient-color-end,
    @_button-gradient-color-start-hover: @button__hover__gradient-color-start,
    @_button-gradient-color-end-hover: @button__hover__gradient-color-end,
    @_button-gradient-color-start-active: @button__active__gradient-color-start,
    @_button-gradient-color-end-active: @button__active__gradient-color-end,

    @_button-icon-use: @button-icon__use,
    @_button-font-content: @button-icon__content,
    @_button-icon-font: @button-icon__font,
    @_button-icon-font-size: @button-icon__font-size,
    @_button-icon-font-line-height: @button-icon__line-height,
    @_button-icon-font-color: @button-icon__color,
    @_button-icon-font-color-hover: @button-icon__hover__font-color,
    @_button-icon-font-color-active: @button-icon__active__font-color,
    @_button-icon-font-margin: @button-icon__margin,
    @_button-icon-font-vertical-align: @button-icon__vertical-align,
    @_button-icon-font-position: @button-icon__position,
    @_button-icon-font-text-hide: @button-icon__text-hide
) {
    background-image: none; // Reset unusual Firefox-on-Android default style
    .lib-css(background, @_button-background);
    .lib-background-gradient(
        @_button-gradient-color-start,
        @_button-gradient-color-end,
        @_button-gradient-direction,
        @_button-gradient
    );
    .lib-css(border, @_button-border);
    .lib-css(color, @_button-color);
    .lib-css(cursor, @_button-cursor);
    .lib-css(display, @_button-display);
    .lib-css(font-family, @_button-font-family);
    .lib-css(font-weight, @_button-font-weight);
    .lib-css(margin, @_button-margin);
    .lib-css(padding, @_button-padding);
    .lib-css(width, @_button-width);
    .lib-font-size(@_button-font-size);
    .lib-line-height(@_button-line-height);
    box-sizing: border-box;
    vertical-align: middle;

    ._lib-button-icon (
        @_button-icon-use: @_button-icon-use,
        @_icon-font-content: @_button-font-content,
        @_icon-font: @_button-icon-font,
        @_icon-font-size: @_button-icon-font-size,
        @_icon-font-line-height: @_button-icon-font-line-height,
        @_icon-font-color: @_button-icon-font-color,
        @_icon-font-color-hover: @_button-icon-font-color-hover,
        @_icon-font-color-active: @_button-icon-font-color-active,
        @_icon-font-margin: @_button-icon-font-margin,
        @_icon-font-vertical-align: @_button-icon-font-vertical-align,
        @_icon-font-position: @_button-icon-font-position,
        @_icon-font-text-hide: @_button-icon-font-text-hide
    );

    &:focus,
    &:active {
        .lib-css(background, @_button-background-active);
        .lib-background-gradient(
            @_button-gradient-color-start-active,
            @_button-gradient-color-end-active,
            @_button-gradient-direction,
            @_button-gradient
        );
        .lib-css(border, @_button-border-active);
        .lib-css(color, @_button-color-active);
    }

    &:hover {
        .lib-css(background, @_button-background-hover);
        .lib-background-gradient(
            @_button-gradient-color-start-hover,
            @_button-gradient-color-end-hover,
            @_button-gradient-direction,
            @_button-gradient
        );
        .lib-css(border, @_button-border-hover);
        .lib-css(color, @_button-color-hover);
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        .lib-css(opacity, @_button-disabled-opacity);
        cursor: default;
        pointer-events: none; // Disabling of clicks
    }
}

//
//  Button size
//  ---------------------------------------------

.lib-button-size(
    @_button-line-height: @button__line-height,
    @_button-padding: @button__padding
){
    .lib-line-height(@_button-line-height);
    .lib-css(padding, @_button-padding);
}

//
//  Large buttons
//  ---------------------------------------------

.lib-button-l(
    @_button-l-font-size: @button__font-size__l,
    @_button-l-height: @button__line-height__l,
    @_button-l-padding: @button__padding__l
) {
    .lib-button-size(
        @_button-line-height: @_button-l-height,
        @_button-padding: @_button-l-padding
    );
    .lib-font-size(@_button-l-font-size);
}

//
//  Small buttons
//  ---------------------------------------------

.lib-button-s(
    @_button-s-font-size: @button__font-size__s,
    @_button-s-height: @button__line-height__s,
    @_button-s-padding: @button__padding__s
) {
    .lib-button-size(
        @_button-line-height: @_button-s-height,
        @_button-padding: @_button-s-padding
    );
    .lib-font-size(@_button-s-font-size);
}

//
//  Link as button
//  ---------------------------------------------

.lib-link-as-button() {
    .lib-css(display, @button__display);
    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
    }
}

//
//  Button as link
//  ---------------------------------------------

.lib-button-as-link(
    @_link-color: @link__color,
    @_link-color-hover: @link__hover__color,
    @_line-height: @line-height__base,
    @_disabled_opacity: @button__disabled__opacity,
    @_margin: 0,
    @_padding: 0
) {
    .lib-css(line-height, @_line-height);
    .lib-css(margin, @_margin);
    .lib-css(padding, @_padding);
    .lib-link(
        @_link-color: @_link-color,
        @_link-color-hover: @_link-color-hover
    );
    background: none;
    border: 0;
    display: inline;

    &:hover,
    &:active,
    &:focus {
        background: none;
        border: 0;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        .lib-css(color, @_link-color);
        .lib-css(opacity, @_disabled_opacity);
        cursor: default;
        pointer-events: none; // Disabling of clicks
        text-decoration: underline;
    }
}

//
//  Responsive
//  ---------------------------------------------

.lib-button-responsive() {
    width: 100%;
}

//
//  Button reset
//  ---------------------------------------------

.lib-button-reset() {
    background-image: none; // Reset unusual Firefox-on-Android default style
    background: none;
    -moz-box-sizing: content-box; // Hack: fix Firefox button line-height problem
    border: 0;
    box-shadow: none;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-shadow: none;
    .lib-css(font-weight, @font-weight__regular);

    &:focus,
    &:active {
        background: none;
        border: none;
    }

    &:hover {
        background: none;
        border: none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        pointer-events: none; // Disabling of all pointer events
        .lib-css(opacity, @button__disabled__opacity);
    }
}

//
//  Button primary
//  ---------------------------------------------

.lib-button-primary(
    @_button-font-family: @button-primary__font-family,
    @_button-font-size: @button-primary__font-size,
    @_button-font-weight: @button-primary__font-weight,
    @_button-line-height: @button-primary__line-height,
    @_button-width: @button-primary__width,
    @_button-margin: @button-primary__margin,
    @_button-padding: @button-primary__padding,
    @_button-color: @button-primary__color,
    @_button-background: @button-primary__background,
    @_button-border: @button-primary__border,
    @_button-gradient-color-start: @button-primary__gradient-color-start,
    @_button-gradient-color-end: @button-primary__gradient-color-end,
    @_button-color-hover: @button-primary__hover__color,
    @_button-background-hover: @button-primary__hover__background,
    @_button-border-hover: @button-primary__hover__border,
    @_button-gradient-color-start-hover: @button-primary__hover__gradient-color-start,
    @_button-gradient-color-end-hover: @button-primary__hover__gradient-color-end,
    @_button-color-active: @button-primary__active__color,
    @_button-background-active: @button-primary__active__background,
    @_button-border-active: @button-primary__active__border,
    @_button-gradient-color-start-active: @button-primary__active__gradient-color-start,
    @_button-gradient-color-end-active: @button-primary__active__gradient-color-end,
    @_button-gradient: @button-primary__gradient,
    @_button-gradient-direction: @button-primary__gradient-direction
) {
    .lib-button(
        @_button-font-family: @_button-font-family,
        @_button-font-size: @_button-font-size,
        @_button-font-weight: @_button-font-weight,
        @_button-line-height: @_button-line-height,
        @_button-width: @_button-width,
        @_button-margin: @_button-margin,
        @_button-padding: @_button-padding,
        @_button-color: @_button-color,
        @_button-background: @_button-background,
        @_button-border: @_button-border,
        @_button-color-hover: @_button-color-hover,
        @_button-background-hover: @_button-background-hover,
        @_button-border-hover: @_button-border-hover,
        @_button-color-active: @_button-color-active,
        @_button-background-active: @_button-background-active,
        @_button-border-active: @_button-border-active,
        @_button-gradient: @_button-gradient,
        @_button-gradient-direction: @_button-gradient-direction,
        @_button-gradient-color-start: @_button-gradient-color-start,
        @_button-gradient-color-end: @_button-gradient-color-end,
        @_button-gradient-color-start-hover: @_button-gradient-color-start-hover,
        @_button-gradient-color-end-hover: @_button-gradient-color-end-hover,
        @_button-gradient-color-start-active: @_button-gradient-color-start-active,
        @_button-gradient-color-end-active: @_button-gradient-color-end-active
     );
}

//
//  Button revert secondary color
//  ---------------------------------------------

.lib-button-revert-secondary-color(
    @_button-color: @button__color,
    @_button-background: @button__background,
    @_button-border: @button__border,

    @_button-color-hover: @button__hover__color,
    @_button-background-hover: @button__hover__background,
    @_button-border-hover: @button__hover__border,

    @_button-color-active: @button__active__color,
    @_button-background-active: @button__active__background,
    @_button-border-active: @button__active__border
) {
    .lib-css(background, @_button-background);
    .lib-css(border, @_button-border);
    .lib-css(color, @_button-color);

    &:focus,
    &:active {
        .lib-css(background, @_button-background-active);
        .lib-css(border, @_button-border-active);
        .lib-css(color, @_button-color-active);
    }

    &:hover {
        .lib-css(background, @_button-background-hover);
        .lib-css(border, @_button-border-hover);
        .lib-css(color, @_button-color-hover);
    }
}

//
//  Button revert secondary size
//  ---------------------------------------------

.lib-button-revert-secondary-size(
    @_button-font-size: @button__font-size,
    @_button-line-height: @button__line-height,
    @_button-padding: @button__padding
) {
    .lib-font-size(@_button-font-size);
    .lib-button-size(
        @_button-line-height: @_button-line-height,
        @_button-padding: @_button-padding
    )
}

//
//  Inner buttons mixins
//  ---------------------------------------------

._lib-button-icon (
    @_button-icon-use: @button-icon__use,
    @_icon-font-content: @button-icon__content,
    @_icon-font: @button-icon__font,
    @_icon-font-size: @button-icon__font-size,
    @_icon-font-line-height: @button-icon__line-height,
    @_icon-font-color: @button-icon__color,
    @_icon-font-color-hover: @button-icon__hover__font-color,
    @_icon-font-color-active: @button-icon__active__font-color,
    @_icon-font-margin: @button-icon__margin,
    @_icon-font-vertical-align: @button-icon__vertical-align,
    @_icon-font-position: @button-icon__position,
    @_icon-font-text-hide: @button-icon__text-hide
) when (@_button-icon-use = true) {
    .lib-button-icon (
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}

.lib-button-icon (
    @_icon-font-content,
    @_icon-font: @button-icon__font,
    @_icon-font-size: @button-icon__font-size,
    @_icon-font-line-height: @button-icon__line-height,
    @_icon-font-color: @button-icon__color,
    @_icon-font-color-hover: @button-icon__hover__font-color,
    @_icon-font-color-active: @button-icon__active__font-color,
    @_icon-font-margin: @button-icon__margin,
    @_icon-font-vertical-align: @button-icon__vertical-align,
    @_icon-font-position: @button-icon__position,
    @_icon-font-text-hide: @button-icon__text-hide
) {
    .lib-icon-font(
        @_icon-font-content: @_icon-font-content,
        @_icon-font: @_icon-font,
        @_icon-font-size: @_icon-font-size,
        @_icon-font-line-height: @_icon-font-line-height,
        @_icon-font-color: @_icon-font-color,
        @_icon-font-color-hover: @_icon-font-color-hover,
        @_icon-font-color-active: @_icon-font-color-active,
        @_icon-font-margin: @_icon-font-margin,
        @_icon-font-vertical-align: @_icon-font-vertical-align,
        @_icon-font-position: @_icon-font-position,
        @_icon-font-text-hide: @_icon-font-text-hide
    );
}
