// mixins for button
// ------------------------
.button-size(@padding; @font-size; @line-height; @border-radius) {
    padding: @padding;
    font-size: @font-size;
    line-height: @line-height;
    border-radius: @border-radius;
}

.button-variant-primary(@color; @background; @border; @background-hover; @background-active; @background-focus) {
    .button-color(@color; @background; @border);

    &:hover{
        .button-bg-color(@background-hover);
    }
    &:focus {
        .button-bg-color(@background-focus);
        box-shadow: @box-shadow-focus;
    }

    &:active,
    &.active {
        .button-bg-color(@background-active);
    }
}
.button-variant-stroke(@color; @background; @border; @background-hover; @background-active; @background-focus){
    .button-color(@color; @background; @border);

    &:hover{
        .button-bg-border-color(@background-hover, @border);
    }
    &:focus {
        .button-bg-border-color(@background-focus, @border);
        box-shadow: @box-shadow-focus;
    }

    &:active,
    &.active {
        .button-bg-border-color(@background-active, @border);
    }
    &.is-disabled {
        .button-color(@border,@background, @border);
    }

}
.button-variant-ghost(@color; @background; @border; @background-hover; @background-active; @background-focus; @hover-text-color){
    .button-color(@color; @background; @border);

    &:hover{
        .button-color(@hover-text-color; @background-hover; @background-hover);
    }
    &:focus {
        .button-color(@hover-text-color; @background-hover; @background-hover);
        box-shadow: @box-shadow-focus;
    }

    &:active,
    &.active {
        .button-color(@hover-text-color; @background-hover; @background-hover);
    }
    &.is-disabled {
        .button-color(@color,@background, @border);
    }
}

// Base styles of buttons
// --------------------------------------------------
.new-button() {
    position: relative;
    display: inline-block;
    font-weight: @button-font-weight;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: @button-border-width @button-border-style transparent;
    cursor: pointer;
    transition: all 0.3s @ease-in-out;
    user-select: none;
    touch-action: manipulation;
    margin-right: 12px;

    &:last-child {
        margin-right: 0;
    }

    .button-size(@button-padding-sm; @font-size-base; @line-height-lg-0; @button-border-radius-base);
    .button-default;

    >.@{iconfont-css-prefix} {
        line-height: 1;
    }

    &,
    &:active,
    &:focus {
        outline: 0;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        box-shadow: none;
    }

    &.disabled,
    &[disabled] {
        cursor: not-allowed;

        >* {
            pointer-events: none;
        }
    }

    &.is-disabled {
        opacity: 0.5;
    }
    &.is-custom{
        padding:12px;
    }
}

.button-default() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-color(@button-default-color; @button-stroke-hover-bg; @button-stroke-hover-bg;);

    &:hover {
        .button-bg-color(@button-default-active-bg);
    }
    &:focus {
        .button-bg-color(@button-stroke-hover-bg);
        box-shadow: @box-shadow-focus;
    }

    &:active,
    &.active {
        .button-bg-color(@button-stroke-hover-bg);
    }
}

// fill-primary button style
// --------------------------------------------------
.button-fill-primary() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-variant-primary(@button-primary-color; @button-fill-primary-bg; @button-fill-primary-bg; @button-fill-primary-hover-bg; @button-primary-active-bg; @button-primary-active-bg);
}
// fill-secondary button style
.button-fill-secondary() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-variant-primary(@button-primary-plain-color; @button-primary-light-bg;@button-primary-light-bg; @button-fill-secondary-hover-bg; @button-fill-secondary-hover-bg; @button-fill-secondary-hover-bg);
}
// stroke button
.button-stroke() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-variant-stroke(@text-color-default; @button-stroke-bg;@button-stroke-border-color; @button-stroke-hover-bg; @button-stroke-hover-bg; @button-stroke-bg);
}
// ghost button
.button-ghost() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-variant-ghost(@button-stroke-border-color; @button-stroke-bg;@button-stroke-bg; @button-stroke-hover-bg; @button-stroke-hover-bg; @button-stroke-hover-bg; @text-color-default);
}
// alert button
.button-alert() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    .button-variant-primary(@button-primary-color; @button-danger-bg; @button-danger-bg; @button-alert-hover-bg; @button-alert-focus-bg; @button-alert-focus-bg);
}
// full-width button
.button-full-width() {
    font-size: @font-size-base;
    font-weight: @bold-weight;
    width: 100%;
    text-align: center;
    .button-variant-primary(@button-primary-color; @button-fill-primary-bg; @button-fill-primary-bg; @button-fill-primary-hover-bg; @button-primary-active-bg; @button-primary-active-bg);
}
.button-color(@color; @background; @border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    >a:only-child {
        color: currentColor;

        &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: transparent;
            content: '';
        }
    }
}

.button-bg-color(@background) {
    background: @background;
    border-color: @background;
}
.button-bg-border-color(@background, @border) {
    background: @background;
    .button-border-color(@border);
}
.button-font-size(@font-size) {
    font-size: @font-size;
}

.button-font-color(@color) {
    color: @color;
}

.button-border-color(@border) {
    border-color: @border;
}

.button-font-border-color(@color) {
    .button-font-color(@color);
    .button-border-color(@color);
}

.button-font-color-border(@color, @border) {
    .button-font-color(@color);
    .button-border-color(@border);
}

.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {

    &-disabled,
    &.disabled,
    &[disabled] {

        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            .button-color(@color; @background; @border);

            text-shadow: none;
            box-shadow: none;
        }
    }
}