.ps-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--button-height);
    border-radius: var(--button-height);
    font-size: var(--font-defalut-size);
}

.ps-button span {
    font-size: var(--font-defalut-size);
}

.ps-button.el-button--text {
    padding-top: 6px;
}

.el-button+.el-button {
    margin-left: 0;
}

.ps-button:active {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}

.ps-button.text--info:active {
    box-shadow: none
}

.ps-button.el-button i {
    margin: 0 5px 0 0;
}

.ps-button.el-button i.only {
    margin: 0 0 0 0;
}

.ps-button.el-button--info {
    background-color: var(--defalut);
    border: 1px solid var(--border-color);
    color: var(--font-main-content);
}

.ps-button.el-button--info:hover {
    color: var(--primary-hover);
    border: 1px solid var(--primary-hover);
}

.ps-button.el-button--info:active {
    color: var(--primary-click);
    border: 1px solid var(--primary-click);
}

.ps-button.el-button--primary {
    background-color: var(--primary);
}

.ps-button.el-button--primary:hover {
    background-color: var(--primary-hover);
}

.ps-button.el-button--primary:active {
    background-color: var(--primary-click);
}


.ps-button.el-button--danger {
    background-color: var(--danger);
}

.ps-button.el-button--danger:hover {
    background-color: var(--danger);
}

.ps-button.el-button--danger:active {
    background-color: var(--danger-click);
}


.ps-button.el-button--text {
    color: var(--primary);
}

.ps-button.el-button--text:hover {
    color: var(--primary-hover);
}

.ps-button.el-button--text:active {
    color: var(--primary-click);
}

.ps-button.el-button--text.is-disabled,
.ps-button.el-button--text.is-disabled:hover,
.ps-button.el-button--text.is-disabled:active {
    color: var(--disabled);
}

.ps-button.is-loading span i {
    display: none;
}

.ps-button.el-button--info.is-disabled,
.ps-button.el-button--info.is-disabled:hover,
.ps-button.el-button--info.is-disabled:active,
.ps-button.el-button--primary.is-disabled,
.ps-button.el-button--primary.is-disabled:hover,
.ps-button.el-button--primary.is-disabled:active,
.ps-button.el-button--danger.is-disabled,
.ps-button.el-button--danger.is-disabled:hover,
.ps-button.el-button--danger.is-disabled:active {
    color: #999999;
    background-color: #F6F6F6;
    border: 1px solid #DBDBDB;
    box-shadow: none;
}

.ps-button.mini {
    height: 24px;
    font-size: 12px;
}

.ps-button.mini span {
    font-size: 12px;
    color: #666666;
}

.ps-button.mini span i[class^=ps-] {
    font-size: 12px;
    color: #666666;
}
