@import '../../common/style/common.less';

.hanzo-button {
    display                 : inline-block;
    position                : relative;
    padding                 : 0;
    height                  : @button-default-height;
    line-height             : @button-default-line-height;
    font-size               : @button-default-font-size;
    border-radius           : @button-border-radius;
    text-align              : center;
    box-sizing              : border-box;
    -webkit-appearance      : none;
    -webkit-text-size-adjust: 100%;

    &::before {
        content         : " ";
        position        : absolute;
        top             : 50%;
        left            : 50%;
        opacity         : 0;
        width           : 100%;
        height          : 100%;
        border          : inherit;
        border-color    : @black;
        background-color: @black;
        border-radius   : inherit;
        /* inherit parent's border radius */
        transform: translate(-50%, -50%);
    }

    &:active::before {
        opacity: .1;
    }

    &--loading,
    &--disabled {
        &::before {
            display: none;
        }
    }

    &--default {
        color           : @button-default-color;
        background-color: @button-default-background-color;
        border          : @button-border-width solid @button-default-border-color;
    }

    &--primary {
        color           : @button-primary-color;
        background-color: @button-primary-background-color;
        border          : @button-border-width solid @button-primary-border-color;
    }

    &--info {
        color           : @button-info-color;
        background-color: @button-info-background-color;
        border          : @button-border-width solid @button-info-border-color;
    }

    &--danger {
        color           : @button-danger-color;
        background-color: #E70013;
        border          : @button-border-width solid @button-danger-border-color;
    }

    &--warning {
        color           : @button-warning-color;
        background-color: #FF7320;
        border          : @button-border-width solid @button-warning-border-color;
    }

    &--gray {
        color           : #fff;
        background-color: #909090;
        border          : @button-border-width solid
    }

    &--plain {
        background-color: @button-plain-background-color;

        &.hanzo-button--primary {
            color: @button-primary-background-color;
        }

        &.hanzo-button--info {
            color: @button-info-background-color;
        }

        &.hanzo-button--danger {
            color: #E70013;
        }

        &.hanzo-button--warning {
            color: #FF7320;
        }
    }

    &--large {
        width      : 100%;
        height     : @button-large-height;
        line-height: @button-large-line-height;
    }

    &--normal {
        padding  : 0 15px;
        font-size: @button-normal-font-size;
    }

    &--small {
        padding    : 0 8px;
        height     : @button-small-height;
        min-width  : @button-small-min-width;
        font-size  : @button-small-font-size;
        line-height: @button-small-line-height;
    }

    &--mini {
        display    : inline-block;
        height     : @button-mini-height;
        min-width  : @button-mini-min-width;
        font-size  : @button-mini-font-size;
        line-height: @button-mini-line-height;

        &+.hanzo-button--mini {
            margin-left: 5px;
        }
    }

    &--block {
        width  : 100%;
        display: block;
    }

    &--disabled {
        opacity: @button-disabled-opacity;
    }

    &--round {
        border-radius: @button-round-border-radius;
    }

    &--square {
        border-radius: 0;
    }

    &__loading-text {
        margin-left   : 5px;
        display       : inline-block;
        vertical-align: middle;
    }
}