:root {
    --btn-color: #1890ff;
    --btn-color-hover: #40a9ff;
    --btn-color-active: #096dd9;
    --btn-danger-color: #ff4d4f;
    --btn-danger-color-hover: #ff7875;
    --btn-danger-color-active:#d9363e;
}

.imitate-btn {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    border-radius: 2px;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.imitate-btn-primary {
    border-color: var(--btn-color);
    background-color: var(--btn-color);
    color: white;
}
.imitate-btn-primary:hover {
    background-color: var(--btn-color-hover);
    border-color: var(--btn-color-hover);
}
.imitate-btn-primary:active {
    background-color: var(--btn-color-active);
    border-color: var(--btn-color-active);
}

.imitate-btn-default {
    border-style: solid;
}
.imitate-btn-dashed {
    border-style: dashed;
}
.imitate-btn-default,
.imitate-btn-dashed {
    border-color:#d9d9d9;
}
.imitate-btn-default:hover,
.imitate-btn-dashed:hover{
    color: var(--btn-color-hover);
    border-color: var(--btn-color-hover);
}
.imitate-btn-default:active,
.imitate-btn-dashed:active{
    color: var(--btn-color-active);
    border-color: var(--btn-color-active);
}

.imitate-btn-text {
    border-color:white;
    background-color: white;
    &:hover {
        border-color: rgba(0,0,0,.018);
        background-color: rgba(0,0,0,.018);
    }
    &:active {
        border-color: rgba(0,0,0,.028);
        background-color: rgba(0,0,0,.028);
    }
}

.imitate-btn-link {
    color: var(--btn-color);
}

/* 正常情况下的 危险 */
.imitate-btn[danger] {
    color: var(--btn-danger-color);
}
.imitate-btn-default[danger],
.imitate-btn-default[danger],
.imitate-btn-primary[danger]
{
    border-color: var(--btn-danger-color);
}
.imitate-btn-primary[danger] {
    background-color: var(--btn-danger-color);
}

/* hover情况下的 危险 */
.imitate-btn-default[danger]:hover,
.imitate-btn-default[danger]:hover,
.imitate-btn-primary[danger]:hover
{
    border-color: var(--btn-danger-color-hover);
    color: var(--btn-danger-color-hover);
}
.imitate-btn-primary[danger]:hover {
    background-color: var(--btn-danger-color-hover);
    color: white;
}

/* active情况下的 危险 */
.imitate-btn-default[danger]:active,
.imitate-btn-default[danger]:active,
.imitate-btn-primary[danger]:active
{
    border-color: var(--btn-danger-color-active);
    color: var(--btn-danger-color-active);
}
.imitate-btn-primary[danger]:active {
    background-color: var(--btn-danger-color-active);
    color: white;
}

/* 禁用 */
.imitate-btn[disabled]{
    color: #00000040;
    cursor: not-allowed;
}
.imitate-btn-primary[disabled],
.imitate-btn-default[disabled],
.imitate-btn-dashed[disabled]
{
    background-color: #f5f5f5;
    border-color: #d9d9d9;
}

/* 动画 */
.imitate-btn-animation-click {
    animation-name: click-animation;
    animation-duration: .6s;
}
@keyframes click-animation {
    0% {
        box-shadow: 0 0 0px 0px #188fffc9;
    }
    80% {
        box-shadow: 0 0 0px 5px #188fff0a;
    }
    100% {
        box-shadow: 0 0 0px 5px white;
    }
}

.imitate-btn-animation-click[danger] {
    animation-name: danger-click-animation;
}
@keyframes danger-click-animation {
    0% {
        box-shadow: 0 0 0px 0px rgba(220, 60, 68, 0.808);
    }
    80% {
        box-shadow: 0 0 0px 5px rgba(220, 60, 68, 0.144);
    }
    100% {
        box-shadow: 0 0 0px 5px white;
    }
}