:root {
    /* primary button */
    --primary-color: #0654c1;
    --primary-solid--normal: #2D84FC;
    --primary-solid--hover: #52A3FF;
    --primary-solid--click: #0B64E0;
    --primary-solid--disabled: #AACFFA;

    --primary-plain--normal: #FFFFFF;
    --primary-plain--hover: #EDF5FF;
    --primary-plain--click: #D7E8FC;
    --primary-plain--disabled: #EDF5FF;

    --primary-text--normal: #2D84FC;
    --primary-text--hover: #52A3FF;
    --primary-text--click: #0B64E0;
    --primary-text--disabled: #AACFFA;

    /* success button */
    --success-color: #0B7350;

    --success-solid--normal: #1EA87A;
    --success-solid--hover: #43BF96;
    --success-solid--click: #14855F;
    --success-solid--disabled: #9CE6CD;

    --success-plain--normal: #FFFFFF;
    --success-plain--hover: #E8F8F2;
    --success-plain--click: #D3F2E8;
    --success-plain--disabled: #E8F8F2;

    --success-text--normal: #1EA87A;
    --success-text--hover: #43BF96;
    --success-text--click: #14855F;
    --success-text--disabled: #9CE6CD;

    /* warning button */
    --warning-color: #A64208;

    --warning-solid--normal: #FF7B2E;
    --warning-solid--hover: #FF9152;
    --warning-solid--click: #E05E12;
    --warning-solid--disabled: #FFBE99;

    --warning-plain--normal: #FFFFFF;
    --warning-plain--hover: #FFF4ED;
    --warning-plain--click: #FFE2D1;
    --warning-plain--disabled: #FFF4ED;

    --warning-text--normal: #FF7B2E;
    --warning-text--hover: #FF9152;
    --warning-text--click: #E05E12;
    --warning-text--disabled: #FFBE99;

    /* danger button */
    --danger-color: #AD131D;

    --danger-solid--normal: #FA4652;
    --danger-solid--hover: #FA646E;
    --danger-solid--click: #D12E39;
    --danger-solid--disabled: #FAAAAF;

    --danger-plain--normal: #FFFFFF;
    --danger-plain--hover: #FFEDEE;
    --danger-plain--click: #FCDCDE;
    --danger-plain--disabled: #FFEDEE;

    --danger-text--normal: #FA4652;
    --danger-text--hover: #FA646E;
    --danger-text--click: #D12E39;
    --danger-text--disabled: #FAAAAF;

    /* info button */
    --info-color: #292B2E;

    --info-solid--normal: #B8C0CC;
    --info-solid--hover: #7D8999;
    --info-solid--click: #515861;
    --info-solid--disabled: #DCE0E6;

    --info-plain--normal: #FFFFFF;
    --info-plain--hover: #FAFBFC;
    --info-plain--click: #F2F5FA;
    --info-plain--disabled: #FFFFFF;

    --info-text--normal: #1F2226;
    --info-text--hover: #292B2E;
    --info-text--click: #0E0E0F;
    --info-text--disabled: #B8C0CC;
}

/**************** primary *******************/
/* 面性 */
.craft-button--default__primary {
    background-color: var(--primary-solid--normal);
}

.craft-button--default__primary:hover {
    background-color: var(--primary-solid--hover);
}

.craft-button--default__primary:active {
    background-color: var(--primary-solid--click);
}

.craft-button--default__primary__disabled {
    background-color: var(--primary-solid--disabled);
}

/* 线性 */
.craft-button--plain__primary {
    background-color: var(--primary-plain--normal);
    color: var(--primary-text--normal);
    box-shadow: var(--primary-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__primary:hover {
    background-color: var(--primary-plain--hover);
    color: var(--primary-text--hover);
    box-shadow: var(--primary-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__primary:active {
    background-color: var(--primary-plain--click);
    color: var(--primary-text--click);
    box-shadow: var(--primary-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__primary__disabled {
    background-color: var(--primary-plain--disabled);
    color: var(--primary-text--disabled);
    box-shadow: var(--primary-text--disabled) 0px 0px 0px 1px inset;
}

/**************** warning *******************/
/* 面性 */
.craft-button--default__warning {
    background-color: var(--warning-solid--normal);
}

.craft-button--default__warning:hover {
    background-color: var(--warning-solid--hover);
}

.craft-button--default__warning:active {
    background-color: var(--warning-solid--click);
}

.craft-button--default__warning__disabled {
    background-color: var(--warning-solid--disabled);
}

/* 线性 */
.craft-button--plain__warning {
    background-color: var(--warning-plain--normal);
    color: var(--warning-text--normal);
    box-shadow: var(--warning-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__warning:hover {
    background-color: var(--warning-plain--hover);
    color: var(--warning-text--hover);
    box-shadow: var(--warning-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__warning:active {
    background-color: var(--warning-plain--click);
    color: var(--warning-text--click);
    box-shadow: var(--warning-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__warning__disabled {
    background-color: var(--warning-plain--disabled);
    color: var(--warning-text--disabled);
    box-shadow: var(--warning-text--disabled) 0px 0px 0px 1px inset;
}

/**************** danger *******************/
/* 面性 */
.craft-button--default__danger {
    background-color: var(--danger-solid--normal);
}

.craft-button--default__danger:hover {
    background-color: var(--danger-solid--hover);
}

.craft-button--default__danger:active {
    background-color: var(--danger-solid--click);
}

.craft-button--default__danger__disabled {
    background-color: var(--danger-solid--disabled);
}

/* 线性 */
.craft-button--plain__danger {
    background-color: var(--danger-plain--normal);
    color: var(--danger-text--normal);
    box-shadow: var(--danger-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__danger:hover {
    background-color: var(--danger-plain--hover);
    color: var(--danger-text--hover);
    box-shadow: var(--danger-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__danger:active {
    background-color: var(--danger-plain--click);
    color: var(--danger-text--click);
    box-shadow: var(--danger-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__danger__disabled {
    background-color: var(--danger-plain--disabled);
    color: var(--danger-text--disabled);
    box-shadow: var(--danger-text--disabled) 0px 0px 0px 1px inset;
}

/**************** success *******************/
/* 面性 */
.craft-button--default__success {
    background-color: var(--success-solid--normal);
}

.craft-button--default__success:hover {
    background-color: var(--success-solid--hover);
}

.craft-button--default__success:active {
    background-color: var(--success-solid--click);
}

.craft-button--default__success__disabled {
    background-color: var(--success-solid--disabled);
}

/* 线性 */
.craft-button--plain__success {
    background-color: var(--success-plain--normal);
    color: var(--success-text--normal);
    box-shadow: var(--success-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__success:hover {
    background-color: var(--success-plain--hover);
    color: var(--success-text--hover);
    box-shadow: var(--success-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__success:active {
    background-color: var(--success-plain--click);
    color: var(--success-text--click);
    box-shadow: var(--success-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__success__disabled {
    background-color: var(--success-plain--disabled);
    color: var(--success-text--disabled);
    box-shadow: var(--success-text--disabled) 0px 0px 0px 1px inset;
}

/**************** info *******************/
/* 面性 */
.craft-button--default__info {
    background-color: var(--info-solid--normal);
}

.craft-button--default__info:hover {
    background-color: var(--info-solid--hover);
}

.craft-button--default__info:active {
    background-color: var(--info-solid--click);
}

.craft-button--default__info__disabled {
    background-color: var(--info-solid--disabled);
}

/* 线性 */
.craft-button--plain__info {
    background-color: var(--info-plain--normal);
    color: var(--info-text--normal);
    box-shadow: var(--info-text--normal) 0px 0px 0px 1px inset;
}

.craft-button--plain__info:hover {
    background-color: var(--info-plain--hover);
    color: var(--info-text--hover);
    box-shadow: var(--info-text--hover) 0px 0px 0px 1px inset;
}

.craft-button--plain__info:active {
    background-color: var(--info-plain--click);
    color: var(--info-text--click);
    box-shadow: var(--info-text--click) 0px 0px 0px 1px inset;
}

.craft-button--default__info__disabled {
    background-color: var(--info-plain--disabled);
    color: var(--info-text--disabled);
    box-shadow: var(--info-text--disabled) 0px 0px 0px 1px inset;
}

/**************** 文字按钮 *******************/
/* primary */
.craft-text__primary {
    color: var(--primary-text--normal);
}
.craft-text__primary:hover {
    color: var(--primary-text--hover);
}
.craft-text__primary:active {
    color: var(--primary-text--click);
}
.craft-text__primary__disabled {
    color: var(--primary-text--disabled);
}

/* success */
.craft-text__success {
    color: var(--success-text--normal);
}
.craft-text__success:hover {
    color: var(--success-text--hover);
}
.craft-text__success:active {
    color: var(--success-text--click);
}
.craft-text__success__disabled {
    color: var(--success-text--disabled);
}
 
/* warning */
.craft-text__warning {
    color: var(--warning-text--normal);
}
.craft-text__warning:hover {
    color: var(--warning-text--hover);
}
.craft-text__warning:active {
    color: var(--warning-text--click);
}
.craft-text__warning__disabled {
    color: var(--warning-text--disabled);
}

/* danger */
.craft-text__danger {
    color: var(--danger-text--normal);
}
.craft-text__danger:hover {
    color: var(--danger-text--hover);
}
.craft-text__danger:active {
    color: var(--danger-text--click);
}
.craft-text__danger__disabled {
    color: var(--danger-text--disabled);
}

/* info */
.craft-text__info {
    color: var(--info-text--normal);
}
.craft-text__info:hover {
    color: var(--info-text--hover);
}
.craft-text__info:active {
    color: var(--info-text--click);
}
.craft-text__info__disabled {
    color: var(--info-text--disabled);
}