@import '../../style/variable.scss';
.x-select{
     width: 100%;
     position: relative;
     display: inline-flex;
     border: 1px solid $theme-border;
     border-radius: 4px;
     line-height: 0.3rem;
     flex-direction: column;
     transition: border 0.5s;
     .x-select-title{
         height: 100%;
         flex:1;
         outline: none;
         cursor: pointer;
         border: 0;
         border-radius: 4px;
         margin: 0;
         padding: 0;
         padding-left: 0.1rem;
         padding-right: 0.15rem;
         overflow: hidden;
         text-overflow:ellipsis;
         white-space: nowrap;
         font-size: 0.14rem;
         user-select: none;
         
     }
     .x-select-title-multiple{
         cursor: default;
         white-space: normal;
         padding-top:3px;
         flex-direction: column;
         .x-select-item-multiple{
             background-color: #fafafa;
             border:1px solid $theme-border;
             margin-right: 5px;
             max-width: 1.5rem;
             border-radius: 2px;
             overflow: hidden;
             text-overflow:ellipsis;
             white-space: nowrap;
             position: relative;
             top:1px;
             padding-right: 20px;
             display: inline-block;
             height: 0.2rem;
             line-height: 0.2rem;
             padding-left: 0.12rem;
             padding-right: 0.2rem;
             i{
                 cursor: pointer;
                 position: absolute;
                 right: 2px;
                 transform: scale(0.6);
                 color: $theme-disable-font
             }
 
         }
         
     }
     .x-select-disabled{
         cursor: not-allowed;
         background-color: $theme-background-gray;
     }
     .x-select-ul{
         position: absolute;
         margin-top: 0.32rem;
         border: 1px solid $theme-border;
         border-radius: 4px;
         background-color: #fff;
         width: 100%;
         box-sizing: border-box;
         max-height: 0rem;
         overflow-y: scroll;
         opacity: 0;
         z-index: 1;
         transition: opacity 0.5s,max-height 0.5s;
         .x-select-li{
             height: 0.3rem;
             line-height: 0.3rem;
             cursor: pointer;
             padding: 0 0.1rem;
             overflow: hidden;
             text-overflow:ellipsis;
             white-space: nowrap;
             &:hover{
                 background-color: rgba($color: $theme-active, $alpha: 0.1);
             }
         }
         .x-select-li-true{
             font-weight: 400;
             background-color: rgba($color: $theme-background-gray, $alpha: 1);
         }
         .x-select-li-disable{
            cursor: not-allowed;
            pointer-events: none;
        }
 
 
         //size
         &-lg{
             margin-top:0.32rem;
             .x-select-li{
                 height: 0.3rem;
                 line-height: 0.3rem;
             }
         }
         &-md{
             margin-top:0.26rem;
             .x-select-li{
                 height: 0.24rem;
                 line-height: 0.24rem;
             }
         }
     }
     .xicon-angle-left,.xicon-angle-right{
         position: absolute;
         margin-right: 0.15rem;
         right: 0rem;
         top:50%;
         transform: translate(50%,-50%) rotate(-90deg);
         cursor: pointer;
         transition: transform 0.5s;
     }
     &-clicked{
         border: 1px solid $theme-active;
         .x-select-ul{
             opacity: 1!important;
             max-height: 1.5rem;
 
             //size
 
             &-lg{
                 max-height: 1.5rem;
             }
             &-md{
                 max-height: 1.2rem
             }
         }
         .xicon-angle-left,.xicon-angle-right{
             transform: translate(50%,-50%) rotate(90deg);
         }
     }
     &-clicked-multiple{
         flex-direction: column;
         line-height: unset;
         justify-content: center;
         min-height: 0.3rem;
         .x-select-ul{
             margin-top: 0.02rem;
         }
     }
     &-content-height{
         height: 0.32rem;
         box-sizing: border-box;
     }
 
 
     //size
     &-lg{
         height: 0.32rem;
         line-height: 0.3rem;
     }
     &-md{
         height: 0.26rem;
         line-height: 0.24rem;
     }
}

.x-select-i18n{
     width: 100%;
     position: relative;
     display: inline-flex;
     border: 1px solid $theme-border;
     border-radius: 4px;
     line-height: 0.3rem;
     flex-direction: column;
     transition: border 0.5s;
     .x-select-title{
         height: 100%;
         flex:1;
         outline: none;
         cursor: pointer;
         border: 0;
         border-radius: 4px;
         margin: 0;
         padding: 0;
         padding-right: 0.1rem;
         padding-left: 0.15rem;
         overflow: hidden;
         text-overflow:ellipsis;
         white-space: nowrap;
         font-size: 0.14rem;
         user-select: none;
         
     }
     .x-select-title-multiple{
         cursor: default;
         white-space: normal;
         padding-top:3px;
         flex-direction: column;
         .x-select-item-multiple{
             background-color: #fafafa;
             border:1px solid $theme-border;
             margin-left: 5px;
             max-width: 1.5rem;
             border-radius: 2px;
             overflow: hidden;
             text-overflow:ellipsis;
             white-space: nowrap;
             position: relative;
             top:1px;
             padding-left: 20px;
             display: inline-block;
             height: 0.2rem;
             line-height: 0.2rem;
             padding-right: 0.12rem;
             padding-left: 0.2rem;
             i{
                 cursor: pointer;
                 position: absolute;
                 left: 2px;
                 transform: scale(0.6);
                 color: $theme-disable-font
             }
 
         }
         
     }
     .x-select-disabled{
         cursor: not-allowed;
         background-color: $theme-background-gray;
     }
     .x-select-ul{
         position: absolute;
         margin-top: 0.32rem;
         border: 1px solid $theme-border;
         border-radius: 4px;
         background-color: #fff;
         width: 100%;
         box-sizing: border-box;
         max-height: 0rem;
         overflow-y: scroll;
         opacity: 0;
         z-index: 1;
         transition: opacity 0.5s,max-height 0.5s;
         .x-select-li{
             height: 0.3rem;
             line-height: 0.3rem;
             cursor: pointer;
             padding: 0 0.1rem;
             overflow: hidden;
             text-overflow:ellipsis;
             white-space: nowrap;
             &:hover{
                 background-color: rgba($color: $theme-active, $alpha: 0.1);
             }
         }
         .x-select-li-true{
             font-weight: 400;
             background-color: rgba($color: $theme-background-gray, $alpha: 1);
         }
         .x-select-li-disable{
            cursor: not-allowed;
            pointer-events: none;
        }
 
 
         //size
         .x-select-lg{
             margin-top:0.32rem;
             .x-select-li{
                 height: 0.3rem;
                 line-height: 0.3rem;
             }
         }
         .x-select-md{
             margin-top:0.26rem;
             .x-select-li{
                 height: 0.24rem;
                 line-height: 0.24rem;
             }
         }
     }
     .xicon-angle-left,.xicon-angle-right{
         position: absolute;
         margin-left: 0.15rem;
         left: 0rem;
         top:50%;
         transform: translate(-50%,-50%) rotate(-90deg);
         cursor: pointer;
         transition: transform 0.5s;
     }
     &-clicked{
         border: 1px solid $theme-active;
         .x-select-ul{
             opacity: 1!important;
             max-height: 1.5rem;
 
             //size
 
             .x-select-lg{
                 max-height: 1.5rem;
             }
             .x-select-md{
                 max-height: 1.2rem
             }
         }
         .xicon-angle-left,.xicon-angle-right{
             transform: translate(-50%,-50%) rotate(90deg);
         }
     }
    &-clicked-multiple{
         flex-direction: column;
         line-height: unset;
         justify-content: center;
         min-height: 0.3rem;
         .x-select-ul{
             margin-top: 0.02rem;
         }
     }
     .x-select-content-height{
         height: 0.32rem;
         box-sizing: border-box;
     }
 
 
     //size
     .x-select-lg{
         height: 0.32rem;
         line-height: 0.3rem;
     }
     .x-select-md{
         height: 0.26rem;
         line-height: 0.24rem;
     }
}