.cooButton{
    display: inline-block;
    cursor: pointer;
    transition: all .3s ease;
    outline: 0;
    box-shadow: none;
    user-select: none;
    text-align: center;
    position: relative;
    background-image: none;
    background-color: transparent;
    font-smoothing: antialiased;
    .cooIcon-loading{
        margin-right: 3px;
    }
    &.circle{
        padding: 0px;
    }
    &.cooButton--fill{
        color: $white;
    }
    &--normal{
        color: $gray;
        border-color: rgb(118, 118, 118);
        &:hover{
            background-color: $grayHover;
        }
        &:active{
            background-color: $grayActive;
        }
        &.cooButton--fill{
            background-color: $gray;
            border-color: $gray;
            &:active{
                background-color: $grayDark;
            }
        }
    }
    &--primary{
        color: $blue;
        border-color: $blue;
        &:hover{
            background-color: $blueHover;
        }
        &:active{
            background-color: $blueActive;
        }
        &.cooButton--fill{
            background-color: $blue;
            border-color: $blue;
            &:active{
                background-color: $blueDark;
            }
        }
    }
    &--white{
        color: $white;
        border-color: $white;
        &:hover{
            background-color: $whiteHover;
        }
        &:active{
            background-color: $whiteActive;
        }
        &.cooButton--fill{
            background-color: $white;
            border-color: $white;
            &:active{
                background-color: $whiteDark;
            }
        }
    }
    &--danger{
        color: $red;
        border-color: $red;
        &:hover{
            background-color: $redHover;
        }
        &:active{
            background-color: $redActive;
        }
        &.cooButton--fill{
            background-color: $red;
            border-color: $red;
            &:active{
                background-color: $redDark;
            }
        }
    }
    &--success{
        color: $green;
        border-color: $green;
        &:hover{
            background-color: $greenHover;
        }
        &:active{
            background-color: $greenActive;
        }
        &.cooButton--fill{
            background-color: $green;
            border-color: $green;
            &:active{
                background-color: $greenDark;
            }
        }
    }

    &--default{
        padding: 6px 15px;
        line-height: 22px;
        border-width: 1px;
        border-style: solid;
        font-size: 14px;
        border-radius: $borderRadius;
        .cooIcon{
            font-size: 16px;
        }
        &.cooButton--circle{
            border-radius: 18px;
            width: 36px;
            padding: 6px 0px;
            .cooIcon{
                font-size: 20px;
            }
        }
    }

    &--large{
        padding: 10px 22px;
        font-size: 16px;
        line-height: 24px;
        border-width: 2px;
        font-weight: 700;
        border-radius: $borderRadiusLarge;
        .cooIcon{
            font-size: 17px;
        }
        &.cooButton--circle{
            border-radius: 29px;
            width: 48px;
            padding: 10px 0px;
            .cooIcon{
                font-size: 22px;
            }
        }
    }
    &--disable{
        background-image: linear-gradient(0deg, #f8f8f8, #efefef);
        border-color: $normalBorderColor;
        background-color: $white;
        color: #999;
        cursor: not-allowed;
        &.transparent{
            background-image: none;
            border-color: transparent;
            color: #999;
            &:hover{
                background-color: $white;
                background-image: none;
                border-color: transparent;
            }
        }
        &:hover{

        }
    }
    &--loading{
        &:before{
            content: '';
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -1px;
            right: -1px;
            transition: opacity .2s;
            pointer-events: none;
            background-color: rgba(255, 255, 255, .3);
        }
    }
}