@charset "utf-8";

@import "./var";
// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]
// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（boder）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
// 如：@button-line-color-bg-hover
// 如：@button-line-height-s

input[type=file],
/* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button {
    /* chromes and blink button */
    cursor: pointer;
}


.#{$prefix}btn {
    height: $form-height;
    min-width: 24px;
    padding: 0px 20px;
    background-color: $btn-primary-color-bg;
    color: $btn-primary-color-text;
    border: 1px solid $btn-primary-color-border;
    line-height: $form-height - 2;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    outline: 0 none;
    box-sizing: border-box;
    text-decoration: none;
    font-size: $btn-font-size;
    vertical-align: middle; //不同类型按钮并列时，水平居中对齐
    white-space: nowrap; //btn 的文字不换行
    border-radius: $btn-border-radius;
    user-select: none;
}
.#{$prefix}btn.is-loading.is-disabled,
.#{$prefix}btn.is-loading{
    color: transparent;
    position: relative;
    min-width: 56px;
    .#{$prefix}icon-loading {
        position: absolute;
        top:50%;
        left:50%;
        margin:-8px 0 0 -8px;
        vertical-align: -3px;
        background-image: url(../../assets/image/slice/svg/loading.svg?fill=#fff);
        
    }
    &:focus,
    &:hover{
        color: transparent;
    }
}

.#{$prefix}btn--weak.is-loading.is-disabled .#{$prefix}icon-loading,
.#{$prefix}btn--weak.is-loading .#{$prefix}icon-loading {
    background-image: url(../../assets/image/slice/svg/loading.svg);
}
.#{$prefix}btn:hover {
    border-color:  $btn-primary-color-border-hover;
    background-color: $btn-primary-color-bg-hover;
    color:$btn-primary-color-text-hover;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.#{$prefix}btn:focus {
//     border-color: $btn-primary-color-border-focus;
//     background-color: $btn-primary-color-bg-focus;
//     color:$btn-primary-color-text-focus;
//     -webkit-transition: all .3s ease-in-out;
//     transition: all .3s ease-in-out;
}
// .#{$prefix}btn:focus:not(.is-focus-visible){
//     border-color: $btn-primary-color-border;
//     background-color: $btn-primary-color-bg;
//     color:$btn-primary-color-text;
// }
.#{$prefix}btn:active {
    border-color: $btn-primary-color-border-active;
    background-color: $btn-primary-color-bg-active;
    color:$btn-primary-color-text-active;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.#{$prefix}btn.is-loading:hover,
// .#{$prefix}btn.is-loading:focus,
.#{$prefix}btn.is-loading:active {
    border-color: $btn-primary-color-border;
    background-color: $btn-primary-color-bg;
    color: transparent;
}
.#{$prefix}btn.is-disabled{
    cursor: not-allowed;
    border-color: $btn-primary-color-border-disabled;
    background-color: $btn-primary-color-bg-disabled;
    color:$btn-primary-color-text-disabled;
    &:hover,
    // &:focus,
    &:active{
        border-color: $btn-primary-color-border-disabled;
        background-color: $btn-primary-color-bg-disabled;
        color:$btn-primary-color-text-disabled;
    }
}




// 支付类按钮 和 tea-btn 一起使用
.#{$prefix}btn--pay {
    border-color: $btn-pay-color-border;
    background-color: $btn-pay-color-bg;
    color:$btn-pay-color-text;
}
.#{$prefix}btn--pay:hover{
    background-color:$btn-pay-color-bg-hover;
    border-color: $btn-pay-color-border-hover;
    color:$btn-pay-color-text-hover;
}
.#{$prefix}btn--pay:focus {
    // background-color:$btn-pay-color-bg-focus;
    // border-color: $btn-pay-color-border-focus;
    // color:$btn-pay-color-text-focus;
}
// .#{$prefix}btn--pay:focus:not(.is-focus-visible) {
//     background-color:$btn-pay-color-bg;
//     border-color: $btn-pay-color-border;
//     color:$btn-pay-color-text;
// }
.#{$prefix}btn--pay:active {
    background-color:$btn-pay-color-bg-active;
    border-color: $btn-pay-color-border-active;
    color:$btn-pay-color-text-active;
}
.#{$prefix}btn--pay.is-loading:hover,
// .#{$prefix}btn--pay.is-loading:focus,
.#{$prefix}btn--pay.is-loading:active {
    border-color: $btn-pay-color-border;
    background-color: $btn-pay-color-bg;
    color:transparent;
}
.#{$prefix}btn--pay.is-disabled{
    border-color: $btn-pay-color-border-disabled;
    background-color: $btn-pay-color-bg-disabled;
    color:$btn-pay-color-text-disabled;
    &:hover,
    // &:focus,
    &:active{
        border-color: $btn-pay-color-border-disabled;
        background-color: $btn-pay-color-bg-disabled;
        color:$btn-pay-color-text-disabled;
    }
}



// 弱按钮
.#{$prefix}btn--weak {
    background-color: $btn-weak-color-bg;
    border-color: $btn-weak-color-border;
    color: $btn-weak-color-text;
}

.#{$prefix}btn--weak:hover{
    background-color: $btn-weak-color-bg-hover;
    border-color: $btn-weak-color-border-hover;
    color: $btn-weak-color-text-hover;
}
.#{$prefix}btn--weak:focus {
    // background-color: $btn-weak-color-bg-focus;
    // border-color: $btn-weak-color-border-focus;
    // color: $btn-weak-color-text-focus;
}
// .#{$prefix}btn--weak:focus:not(.is-focus-visible){
//     background-color: $btn-weak-color-bg;
//     border-color: $btn-weak-color-border;
//     color: $btn-weak-color-text;
// }

.#{$prefix}btn--weak:active {
    background-color: $btn-weak-color-bg-active;
    border-color: $btn-weak-color-border-active;
    color: $btn-weak-color-text-active;
}
.#{$prefix}btn--weak.is-loading:hover, 
// .#{$prefix}btn--weak.is-loading:focus,
.#{$prefix}btn--weak.is-loading:active{
    background-color: $btn-weak-color-bg;
    border-color: $btn-weak-color-border;
    color: transparent;
}
.#{$prefix}btn--weak.is-disabled{
    background-color: $btn-weak-color-bg-disabled;
    border-color: $btn-weak-color-border-disabled;
    color: $btn-weak-color-text-disabled;
    &:hover,
    // &:focus,
    &:active{
        background-color: $btn-weak-color-bg-disabled;
        border-color: $btn-weak-color-border-disabled;
        color: $btn-weak-color-text-disabled;
    }
}



.#{$prefix}btn--file {
    position: relative;
    font-size: 0;
    overflow: hidden;
    cursor: pointer;
    input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        font-size: $btn-font-size;
        opacity: 0;
    }
    span {
        display: inline-block;
        font-size: $btn-font-size;
    }
}
// 警告色按钮
.#{$prefix}btn--error{
    background-color: $btn-error-color-bg;
    border-color: $btn-error-color-border;
    color:$btn-error-color-text;
}

.#{$prefix}btn--error:hover{
    background-color: $btn-error-color-bg-hover;
    border-color: $btn-error-color-border-hover;
    color:$btn-error-color-text-hover;
}
.#{$prefix}btn--error:focus {
    // background-color: $btn-error-color-bg-focus;
    // border-color: $btn-error-color-border-focus;
    // color:$btn-error-color-text-focus;
}
// .#{$prefix}btn--error:focus:not(.is-focus-visible) {
//     background-color: $btn-error-color-bg;
//     border-color: $btn-error-color-border;
//     color:$btn-error-color-text;
// }
.#{$prefix}btn--error:active {
    background-color: $btn-error-color-bg-active;
    border-color: $btn-error-color-border-active;
    color:$btn-error-color-text-active;
}
.#{$prefix}btn--error.is-loading:hover, 
// .#{$prefix}btn--error.is-loading:focus,
.#{$prefix}btn--error.is-loading:active{
    background-color: $btn-error-color-bg;
    border-color: $btn-error-color-border;
    color:transparent;
}
.#{$prefix}btn--error.is-disabled{
    background-color: $btn-error-color-bg-disabled;
    border-color: $btn-error-color-border-disabled;
    color:$btn-error-color-text-disabled;
    &:hover,
    // &:focus,
    &:active{
        background-color: $btn-error-color-bg-disabled;
        border-color: $btn-error-color-border-disabled;
        color:$btn-error-color-text-disabled;
    }
}

// 禁用
// .#{$prefix}btn.is-disabled,
// .#{$prefix}btn.is-disabled:hover,
// .#{$prefix}btn.is-disabled:focus,
// .#{$prefix}btn--error.is-disabled,
// .#{$prefix}btn--pay.is-disabled,
// .#{$prefix}btn--weak.is-disabled {
//     border-color: #ddd;
//     background-color: #fff;
//     color: #bbb;
//     cursor: not-allowed;
// }

// 应该放到对应的组件里
// .tc-15-action-panel .#{$prefix}btn{
//     float: left;
//     margin-right: 5px;
// }
// .tc-15-action-panel .#{$prefix}btn.setting,
// .tc-15-action-panel .#{$prefix}btn.download{
// 	float: right;
// 	margin: 2px 0 0 5px;
// }
// .tc-15-search .#{$prefix}btn.search{
// 	position: absolute;
// 	border-top-left-radius:0;
// 	border-bottom-left-radius:0;
// 	width: 28px !important;
// 	right: 1px;
// 	border: none;
// 	height: 28px;
// 	top: 1px;
// 	z-index: 99;
// }
// .tc-15-search .#{$prefix}btn.search:hover,
// .tc-15-search .#{$prefix}btn.search:focus {
//     z-index: 999999;
// }
// 筛选下拉按钮
// .#{$prefix}btn--select {
//     clear: right;
//     background-color: #fff;
//     border-color: #ddd;
//     color: #000;
// }
// .#{$prefix}btn--select:after{
// 	content:'';
// 	display:inline-block;
// 	width: 16px;
// 	height: 16px;
// 	background-image: url(../../assets/image/slice/svg/page-next.svg);
// 	margin-left:5px;
// 	vertical-align: -3px;
// 	background-position: inherit;
// }
// .#{$prefix}btn--select.is-active:after {
// 	background-image: url(../../assets/image/slice/svg/page-next.svg);
// 	background-position: inherit;
// }
// .#{$prefix}btn--select.is-active {
//     position: relative;
//     border-bottom-color: #fcfcfc;
//     padding-bottom: 6px;
//     border-radius: 0;
//     z-index: 1;
//     height: 36px;
// }
// .#{$prefix}btn--select.is-active:hover,
// .#{$prefix}btn--select.is-active:focus {
//     background-position: inherit;
//     border: 1px solid #d1d2d3;
//     border-bottom-color: #fcfcfc;
// }
// 链接按钮
.#{$prefix}btn--text {
    display: inline-block;
    text-align: center;
    height: initial;
    padding: $btn-text-padding;
    vertical-align: middle;
    text-decoration: none;
    line-height: 1.5;
    background-color: $btn-text-color-bg;
    border: none;
    color: $btn-text-color-text;
}
.#{$prefix}btn--text:hover{
    background-color: $btn-text-color-bg-hover;
    color: $btn-text-color-text;
    text-decoration: none;
}
.#{$prefix}btn--text:focus{
    // background-color: $btn-text-color-bg-focus;
    // color: $btn-text-color-text;
}
// .#{$prefix}btn--text:focus:not(.is-focus-visible){
//     background-color: $btn-text-color-bg;
//     color: $btn-text-color-text;
// }
.#{$prefix}btn--text:active {
    background-color: $btn-text-color-bg-active;
    color: $btn-text-color-text;
    
    
}
.#{$prefix}btn--text.is-disabled{
    background-color: $btn-text-color-bg-disabled;
    text-decoration: none;
    color:$btn-text-color-text-disabled;
    &:hover,
    // &:focus,
    &:active{
        background-color: $btn-text-color-bg-disabled;
        text-decoration: none;
        color:$btn-text-color-text-disabled;
    }
}


.#{$prefix}btn--link {
    display: inline-block;
    text-align: center;
    height:auto;
    height: initial;
    padding: $btn-link-padding;
    vertical-align: middle;
    text-decoration: none;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    color: $btn-link-color-text;
}
.#{$prefix}btn--link:hover{
    background-color: $btn-link-color-bg-hover;
    color:$btn-link-color-text-hover;
    text-decoration: none;
}
.#{$prefix}btn--link:focus{
    // background-color: $btn-link-color-bg-focus;
    // color:$btn-link-color-text-focus;
    // text-decoration: none;
}
// .#{$prefix}btn--link:focus:not(.is-focus-visible){
//     background-color: $btn-link-color-bg;
//     color:$btn-link-color-text;
//     text-decoration: none;
// }
.#{$prefix}btn--link:active{   
    background-color: $btn-link-color-bg-active;
    color:$btn-link-color-text-active;
    text-decoration: none;
}
.#{$prefix}btn--link.is-disabled{
    border:none;
    color:$btn-text-color-text-disabled;
    background-color: transparent;
    text-decoration: none;
    &:hover,
    // &:focus,
    &:active{
        border:none;
        color:$btn-text-color-text-disabled;
        background-color: transparent;
        text-decoration: none;
    }
}

// icon按钮
.#{$prefix}btn--icon {
    display: inline-block;
    font-size: 0;
    border: none;
    padding: $btn-icon-padding;
    height: inherit;
    line-height: inherit;
    background-color: $btn-icon-color-bg;
    box-sizing: border-box;
}

.#{$prefix}btn--icon:hover{
    background-color: $btn-icon-color-bg-hover;
    text-decoration: none;
}
.#{$prefix}btn--icon:active {
    background-color: $btn-icon-color-bg-active;
    text-decoration: none;
}

.#{$prefix}btn--icon:focus {
    // background-color: $btn-icon-color-bg-focus;
}
// .#{$prefix}btn--icon:focus:not(.is-focus-visible) {
//     background-color: $btn-icon-color-bg;
// }
.#{$prefix}btn--icon.is-disabled{
    background-color:$btn-icon-color-bg-disabled;
}

.#{$prefix}btn--icon.is-disabled .#{$prefix}icon {
    opacity: 0.5;
}
.#{$prefix}btn--icon.is-disabled,
.#{$prefix}btn--icon.is-disabled:hover,
// .#{$prefix}btn--icon.is-disabled:focus,
.#{$prefix}btn--icon.is-disabled:active{
    background-color:$btn-icon-color-bg-disabled;
}

.#{$prefix}btn .#{$prefix}icon.is-middle {
    vertical-align: -3px;
}