@import '../style/init.less';
.ui-size{
    &.ui-small{
        padding: 5px 10px;
        &.ui-text{
            padding: 5px 0;
            margin-right: 10px;
        }
    }
    &.ui-mini{
        padding: 3px 8px;
        &.ui-text{
            padding: 3px 0;
            margin-right: 10px;
        }
    }
    &.ui-large{
        padding: 8px 16px;
        &.ui-text{
            padding: 8px 0;
            margin-right: 10px;
        }
    }
}

.ui-button {
    border: none;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    border-radius: 3px;
    &:last-child{
        margin-right: 0;
    }
    &.ui-primary{
        background-color: @primary;
        color: #fff;
        &:hover{
            background-color: fadeout(@primary,20%);
        }
        &:active{
            background-color: fadein(@primary,20%);
        }
        &.ui-text{
            background-color: transparent;
            color: @primary;
            &:hover{
                color: fadeout(@primary,20%);
            }
            &:active{
                color: fadein(@primary,20%);
            }
        }
    }
    &.ui-success{
        background-color: @success;
        color: #fff;
        &:hover{
            background-color: fadeout(@success,20%);
        }
        &:active{
            background-color: fadein(@success,20%);
        }
        &.ui-text{
            background-color: transparent;
            color: @success;
            &:hover{
                color: fadeout(@success,20%);
            }
            &:active{
                color: fadein(@success,20%);
            }
        }
    }
    &.ui-warning{
        background-color: @warning;
        color: #fff;
        &:hover{
            background-color: fadeout(@warning,20%);
        }
        &:active{
            background-color: fadein(@warning,20%);
        }
        &.ui-text{
            background-color: transparent;
            color: @warning;
            &:hover{
                color: fadeout(@warning,20%);
            }
            &:active{
                color: fadein(@warning,20%);
            }
        }
    }
    &.ui-danger{
        background-color: @danger;
        color: #fff;
        &:hover{
            background-color: fadeout(@danger,20%);
        }
        &:active{
            background-color: fadein(@danger,20%);
        }
        &.ui-text{
            background-color: transparent;
            color: @danger;
            &:hover{
                color: fadeout(@danger,20%);
            }
            &:active{
                color: fadein(@danger,20%);
            }
        }
    }
    &.ui-info{
        background-color: @info;
        color: #fff;
        &:hover{
            background-color: fadeout(@info,20%);
        }
        &:active{
            background-color: fadein(@info,20%);
        }
        &.ui-text{
            background-color: transparent;
            color: @info;
            &:hover{
                color: fadeout(@info,20%);
            }
            &:active{
                color: fadein(@info,20%);
            }
        }
    }
}