@charset "utf-8";
@import './var';
// .manage-area-title .#{$prefix}segment .#{$prefix}btn{
//     padding: 0 10px;
//     background-color: transparent;
//     border-color: transparent;
// }

.#{$prefix}segment {
    vertical-align: middle;
    padding-left: 1px;
    display: inline-block;
    font-size: 0;
    margin-bottom: -5px;
    overflow: visible;

}

.#{$prefix}segment .#{$prefix}btn {
    float: left;
    position: relative;
    margin-left: -1px;
    z-index: 0;
    border-radius: 0;
    border-color: $segment-color-border;
    background-color: $segment-color-bg;
    color: $segment-color-text;
    margin-bottom: 5px;
    padding: 0 20px;
    margin-right:0!important;
}
.#{$prefix}segment > span{    //当btn disable的时候，bubble提示，需要外面套一层span，而且是公用的，即所有disable的btn都会套这个，所以这里也没法单独区分，因此暂时没用类名
    float:left;
    display:flex!important;
    flex:1 0 auto;
    .#{$prefix}btn{
        pointer-events: none
    }
}
.#{$prefix}segment .#{$prefix}segment__last{
    
    padding:0 4px;
    display: inline-flex;
    height: $segment-height;
    align-items: center;
}
.#{$prefix}segment .#{$prefix}btn .#{$prefix}badge{
    font-size: $segment-font-size-default;
    position: absolute;
    right: 0;
    top: -8px;
    height: auto;
    line-height: normal;
    
}

.#{$prefix}segment .#{$prefix}btn:first-child,
.#{$prefix}segment .#{$prefix}btn.first {
    /* border-radius: 2px 0 0 2px; */
    border-radius: $segment-border-radius 0 0  $segment-border-radius;
}

.#{$prefix}segment .#{$prefix}btn:last-child,
.#{$prefix}segment .#{$prefix}btn.last {
    /* border-radius: 0 2px 2px 0 */
    border-radius:0 $segment-border-radius $segment-border-radius 0;
}
.#{$prefix}segment .#{$prefix}btn:first-child:last-child{
    border-radius: $segment-border-radius
}

.#{$prefix}segment .#{$prefix}btn.is-selected,
.#{$prefix}segment .#{$prefix}btn.is-selected:hover {
    z-index: 2;
    border-color: $segment-color-text-selected;
    background: $segment-color-bg;
    color: $segment-color-text-selected;
}
.#{$prefix}segment .#{$prefix}btn:hover{
    border-color: $segment-color-border;
    background-color: $segment-color-bg-hover;
    color: $segment-color-text;
    z-index: 1;
}

.#{$prefix}segment .#{$prefix}btn.is-disabled {
    border-color: $segment-color-border;
    background-color: transparent;
    color: $segment-color-text-disabled;
    z-index: 1;
}

.#{$prefix}segment .#{$prefix}btn.is-disabled:hover,
.#{$prefix}segment .#{$prefix}btn.is-disabled:focus {
    z-index: 0;
    border-color: $segment-color-border;
    background-color: transparent;
    color:$segment-color-text-disabled;
}
.#{$prefix}segment .#{$prefix}btn.is-selected.is-disabled {
    border-color: $color-primary-disabled;
    background-color: transparent;
    color:$color-primary-disabled;
    z-index: 2;
}
// .tc-15-rich-dialog .#{$prefix}segment .#{$prefix}btn {
//     position: relative;
//     height:30px;
//     line-height: 30px;
// }
.#{$prefix}segment .tc-discount-icon{
    background-color: $segment-discount-color-bg;
    color: $segment-discount-color-text;
    padding: 0 2px;
    position: absolute;
    right: 0;
    top: $segment-height * (-10px)/30px;
    line-height: initial;
    z-index: 99;
}
.#{$prefix}segment .new-mark-icon {
    margin-left: 5px;
    vertical-align: -3px;
}

.#{$prefix}segment--rimless{
    .#{$prefix}btn{
        border-color:transparent;
        padding:0 10px;
        height: $segment-rimless-height;
        line-height: $segment-rimless-height;
        border-radius: $segment-border-radius;
        &:first-child,
        &:last-child{
            border-radius: $segment-border-radius;
        }
    }
}