shineout/css/TreeSelect/styles/treeSelect.css

Shein 前端组件库

.so-treeSelect {
  position: relative;
}
.so-treeSelect-inner {
  width: 100%;
  outline: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-treeSelect-tree-wrapper {
  color: var(--gray-600, #6c757d);
  padding: 8px 8px 4px 8px;
  max-width: 100vw;
}
.so-treeSelect-tree-wrapper .so-tree-node:last-child > div {
  margin-bottom: var(--tree-node-margin-bottom, 4px);
}
.so-treeSelect-tree-wrapper .so-tree-content {
  white-space: nowrap;
  padding-left: 4px;
}
.so-treeSelect-tree-wrapper .so-tree-content .so-tree-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-treeSelect-tree-wrapper .so-treeSelect-single .so-tree-content {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  padding-left: 0;
}
.so-treeSelect-tree-wrapper .so-treeSelect-single .so-tree-content:hover .so-treeSelect-content-wrapper:not(.so-treeSelect-selected):not(.so-treeSelect-disabled) {
  background: var(--select-tree-node-hover-bg, var(--primary-color-fade-10, rgba(51, 153, 255, 0.1)));
  color: var(--select-tree-node-hover-color, var(--gray-600, #6c757d));
}
.so-treeSelect-result {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  max-height: 80px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 6px 24px 0 12px;
}
.so-input-rtl .so-treeSelect-result,
so-treeSelect-rtl .so-treeSelect-result {
  padding: 6px 12px 0 24px;
}
.so-treeSelect-result span {
  display: inline-block;
}
.so-treeSelect-result span.so-treeSelect-ellipsis {
  display: block;
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-treeSelect-result .so-treeSelect-ellipsis {
  margin-bottom: 6px;
}
.so-treeSelect-result .so-treeSelect-ellipsis:after {
  content: '\feff ';
}
.so-treeSelect-result .so-treeSelect-input {
  display: block;
  min-width: 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 6px;
  outline: none;
  white-space: pre-wrap;
  cursor: text;
}
.so-treeSelect-result .so-treeSelect-input:after {
  content: '\feff ';
}
.so-treeSelect-result .so-treeSelect-item {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 80%;
  padding: var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal-16, 20px) var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal, 4px);
  margin-right: var(--select-result-padding-horizontal, 4px);
  margin-bottom: 6px;
  background: var(--gray-100, #f8f9fa);
  border-radius: 3px;
  color: inherit;
  text-overflow: ellipsis;
}
.so-input-rtl .so-treeSelect-result .so-treeSelect-item,
so-treeSelect-rtl .so-treeSelect-result .so-treeSelect-item {
  padding: var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal, 4px) var(--select-result-padding-vertical, 0) var(--select-result-padding-horizontal-16, 20px);
  margin-left: var(--select-result-padding-horizontal, 4px);
  margin-right: 0;
}
.so-treeSelect-result .so-treeSelect-item-compressed {
  padding: 0 8px;
  font-size: 80%;
  opacity: 0.9;
  text-overflow: unset;
  -webkit-transition: none;
  transition: none;
}
.so-treeSelect-result .so-treeSelect-item-compressed > span {
  vertical-align: middle;
  letter-spacing: 2px;
}
.so-treeSelect-result .so-treeSelect-item-more {
  background: var(--primary-color-fade-60, rgba(51, 153, 255, 0.6));
  color: #fff;
}
.so-treeSelect-result .so-treeSelect-item.so-treeSelect-disabled {
  cursor: not-allowed;
}
.so-treeSelect-result .so-treeSelect-item.so-treeSelect-disabled-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-result .so-treeSelect-item.so-treeSelect-disabled-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close {
  right: var(--select-result-padding-horizontal, 4px);
  display: block;
  background-color: transparent;
}
.so-input-rtl .so-treeSelect-result .so-treeSelect-item .so-treeSelect-close,
so-treeSelect-rtl .so-treeSelect-result .so-treeSelect-item .so-treeSelect-close {
  left: var(--select-result-padding-horizontal, 4px);
  right: auto;
}
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close:before,
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close:after {
  background-color: var(--gray-500, #adb5bd);
  width: 8px;
}
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close:hover {
  background-color: transparent;
}
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close:hover:before,
.so-treeSelect-result .so-treeSelect-item .so-treeSelect-close:hover:after {
  background-color: var(--gray-600, #6c757d);
}
.so-treeSelect-compressed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 0;
}
.so-treeSelect-compressed .so-treeSelect-ban-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-compressed .so-treeSelect-ban-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-compressed .so-treeSelect-input {
  white-space: nowrap;
}
.so-treeSelect-compressed .so-treeSelect-item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.so-treeSelect-compressed .so-treeSelect-item-only {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.so-treeSelect-close-warpper {
  position: absolute;
  top: 50%;
  right: 7px;
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.so-input-rtl .so-treeSelect-close-warpper,
so-treeSelect-rtl .so-treeSelect-close-warpper {
  right: auto;
  left: 7px;
  z-index: 1;
}
.so-treeSelect-close-warpper .so-treeSelect-indicator {
  right: 2px;
}
.so-input-rtl .so-treeSelect-close-warpper .so-treeSelect-indicator,
so-treeSelect-rtl .so-treeSelect-close-warpper .so-treeSelect-indicator {
  left: 2px;
  right: auto;
}
.so-treeSelect-indicator {
  position: absolute;
  top: 50%;
  right: 7px;
  display: block;
  width: 12px;
  height: 12px;
  color: var(--gray-500, #adb5bd);
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.so-input-rtl .so-treeSelect-indicator,
so-treeSelect-rtl .so-treeSelect-indicator {
  right: auto;
  left: 7px;
}
.so-treeSelect-indicator.so-treeSelect-close {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  display: none;
  background: var(--select-clear-bg-color, #94a1ae);
  border-radius: 6px;
}
.so-treeSelect-indicator.so-treeSelect-close:hover {
  background: var(--input-clear-bg-hover-color, #3399ff);
}
.so-treeSelect-indicator.so-treeSelect-close:after,
.so-treeSelect-indicator.so-treeSelect-close:before {
  position: absolute;
  top: 5px;
  left: 3px;
  display: block;
  width: 6px;
  height: 1px;
  background: #fff;
  content: ' ';
}
.so-treeSelect-indicator.so-treeSelect-close:after {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.so-treeSelect-indicator.so-treeSelect-close:before {
  -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
          transform: rotate(315deg);
}
.so-treeSelect-indicator.so-treeSelect-caret {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.so-treeSelect-indicator.so-treeSelect-caret svg {
  fill: var(--gray-500, #adb5bd);
  vertical-align: top;
}
.so-treeSelect-focus .so-treeSelect-close,
.so-treeSelect-result:hover .so-treeSelect-close,
.so-treeSelect-title-box:hover .so-treeSelect-close {
  display: block;
}
.so-treeSelect-options,
.so-treeSelect-box-list {
  position: absolute;
  min-width: 100%;
  z-index: 1000;
  left: 0;
  display: none;
  overflow: hidden;
  background: #fff;
  border-radius: var(--input-dropdown-border-radius, 4px);
}
.so-input-rtl .so-treeSelect-options,
.so-input-rtl .so-treeSelect-box-list,
so-treeSelect-rtl .so-treeSelect-options,
so-treeSelect-rtl .so-treeSelect-box-list {
  left: auto;
  right: 0;
}
.so-treeSelect-options .so-treeSelect-disabled,
.so-treeSelect-box-list .so-treeSelect-disabled,
.so-treeSelect-options .so-treeSelect-disabled:hover,
.so-treeSelect-box-list .so-treeSelect-disabled:hover,
.so-treeSelect-options .so-treeSelect-disabled.so-treeSelect-active,
.so-treeSelect-box-list .so-treeSelect-disabled.so-treeSelect-active {
  background: var(--input-bg-disabled, #e9ecef);
  cursor: not-allowed;
}
.so-treeSelect-options span.so-treeSelect-content-wrapper {
  display: block;
  padding: 0px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-treeSelect-options span.so-treeSelect-selected {
  background-color: var(--select-tree-node-selected-bg, var(--primary-color-fade-10, rgba(51, 153, 255, 0.1)));
  color: var(--select-tree-node-selected-color, var(--primary-color, #3399ff));
}
.so-treeSelect-box-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  min-height: 200px;
  max-height: 300px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.so-treeSelect-box-list .so-treeSelect-header {
  padding: 6px 12px;
  border-bottom: solid 1px #eee;
}
.so-treeSelect-box-list .so-treeSelect-box-options {
  overflow: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 6px 0;
}
.so-treeSelect-box-list .so-treeSelect-box-options .so-treeSelect-no-data {
  padding-top: 60px;
  color: var(--gray-500, #adb5bd);
  text-align: center;
}
.so-treeSelect-box-list .so-treeSelect-option {
  display: inline-block;
}
.so-treeSelect-box-list .so-treeSelect-option-ltr {
  padding-right: 12px;
  margin-right: 0;
}
.so-treeSelect-box-list .so-treeSelect-option-rtl {
  padding-left: 12px;
  margin-left: 0;
}
.so-treeSelect-box-list .so-treeSelect-filter-input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 180px;
  border-width: 1px;
  border-radius: 2px;
  float: right;
}
.so-treeSelect-box-list .so-treeSelect-filter-input svg {
  width: 22px;
  height: 22px;
  padding: 4px;
}
.so-treeSelect-box-list .so-treeSelect-filter-input svg path {
  fill: #999;
}
.so-treeSelect-drop-down .so-treeSelect-options,
.so-treeSelect-drop-down .so-treeSelect-box-list {
  top: 100%;
  margin-top: 4px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}
.so-treeSelect-drop-up .so-treeSelect-options,
.so-treeSelect-drop-up .so-treeSelect-box-list {
  bottom: 100%;
  margin-bottom: 4px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 -2px 12px rgba(0, 0, 0, 0.175);
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 -2px 12px rgba(0, 0, 0, 0.175);
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.so-treeSelect-option {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 6px 24px 6px 12px;
  color: var(--gray-800, #343a40);
  font-size: var(--font-size-base, 14px);
  line-height: var(--common-line-height, 1.42857143);
  text-overflow: ellipsis;
  -webkit-transition: none;
  transition: none;
  white-space: nowrap;
}
.so-input-rtl .so-treeSelect-option,
so-treeSelect-rtl .so-treeSelect-option {
  padding: 6px 12px 6px 24px;
}
.so-treeSelect-option.so-treeSelect-active {
  background-color: var(--select-item-active-bg, #f5f5f5);
  color: var(--select-item-active-color, #292d32);
  text-decoration: none;
}
.so-treeSelect-option.so-treeSelect-active::after {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='var(--primary-color, #3399ff)' d='M913.017 237.02c-25.311-25.312-66.349-25.312-91.66 0l-412.475 412.474-206.237-206.237c-25.312-25.312-66.35-25.312-91.661 0s-25.312 66.35 0 91.66l252.067 252.067c0.729 0.73 1.439 1.402 2.134 2.029 25.434 23.257 64.913 22.585 89.527-2.029l458.303-458.303c25.313-25.312 25.313-66.35 0.001-91.661z'%3E%3C/path%3E%3C/svg%3E");
  color: var(--primary-color, #3399ff);
  content: ' ';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.so-treeSelect-option:hover {
  color: var(--gray-800, #343a40);
}
.so-treeSelect-option.so-treeSelect-disabled,
.so-treeSelect-option.so-treeSelect-disabled:hover,
.so-treeSelect-option.so-treeSelect-disabled.so-treeSelect-active {
  background: var(--input-bg-disabled, #e9ecef);
  cursor: not-allowed;
}
.so-treeSelect-control-mouse .so-treeSelect-option:hover {
  background-color: var(--select-option-hover-bg, #f5f5f5);
  color: var(--select-option-hover-color, #3399ff);
  text-decoration: none;
}
.so-treeSelect-control-mouse .so-treeSelect-option.so-treeSelect-disabled:hover {
  background: var(--input-bg-disabled, #e9ecef);
}
.so-treeSelect-control-keyboard .so-treeSelect-option.so-treeSelect-hover {
  background-color: var(--select-option-hover-bg, #f5f5f5);
  color: var(--select-option-hover-color, #3399ff);
  text-decoration: none;
}
.so-treeSelect-control-keyboard .so-treeSelect-option {
  cursor: none;
}
span.so-treeSelect-option {
  color: var(--gray-500, #adb5bd);
}
.so-treeSelect-small .so-treeSelect-result {
  padding: 5px 22px 0 10px;
}
.so-treeSelect-small .so-treeSelect-result .so-treeSelect-item,
.so-treeSelect-small .so-treeSelect-result .so-treeSelect-ellipsis,
.so-treeSelect-small .so-treeSelect-result .so-treeSelect-input {
  margin-bottom: 5px;
}
.so-treeSelect-large .so-treeSelect-result {
  padding: 8px 28px 0 16px;
}
.so-treeSelect-large .so-treeSelect-result .so-treeSelect-item,
.so-treeSelect-large .so-treeSelect-result .so-treeSelect-ellipsis,
.so-treeSelect-large .so-treeSelect-result .so-treeSelect-input {
  margin-bottom: 8px;
}
.so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) {
  padding-left: 6px;
  padding-right: 34px;
}
.so-input-rtl .so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty),
so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) {
  padding-right: 6px;
  padding-left: 34px;
}
.so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) .so-treeSelect-close-warpper {
  right: 17px;
}
.so-input-rtl .so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) .so-treeSelect-close-warpper,
so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) .so-treeSelect-close-warpper {
  left: 17px;
  right: auto;
}
.so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) {
  padding-left: 6px;
  padding-right: 24px;
}
.so-input-rtl .so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty),
so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) {
  padding-right: 6px;
  padding-left: 24px;
}
.so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) .so-treeSelect-close-warpper {
  right: 7px;
}
.so-input-rtl .so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) .so-treeSelect-close-warpper,
so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) .so-treeSelect-close-warpper {
  left: 7px;
  right: auto;
}
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-result-ltr:not(.so-treeSelect-empty) {
  padding-left: 8px;
}
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-result-rtl:not(.so-treeSelect-empty) {
  padding-right: 8px;
}
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-result-ltr:not(.so-treeSelect-empty) {
  padding-left: 5px;
}
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-result-rtl:not(.so-treeSelect-empty) {
  padding-right: 5px;
}
.so-treeSelect-popover .so-treeSelect-result {
  padding: 14px 14px 8px 14px;
  max-height: 112px;
  max-width: 300px;
}
.so-treeSelect-popover .so-treeSelect-result .so-treeSelect-item {
  max-width: 100%;
  color: var(--gray-600, #6c757d);
  font-size: 16px;
}
.so-treeSelect-disabled .so-treeSelect-result {
  cursor: not-allowed;
}
.so-treeSelect-disabled .so-treeSelect-result .so-treeSelect-item {
  background: var(--input-bg-disabled, #e9ecef);
}
.so-treeSelect-disabled .so-treeSelect-result .so-treeSelect-item-ltr {
  padding-right: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-disabled .so-treeSelect-result .so-treeSelect-item-rtl {
  padding-left: var(--select-result-padding-horizontal, 4px);
}
.so-treeSelect-disabled .so-treeSelect-result .so-treeSelect-item .so-treeSelect-close {
  display: none;
}
.so-treeSelect-title-box > .so-input-title-box-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 20px;
}
.so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 20px;
  padding-right: 8px;
}
.so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-item,
.so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-ellipsis,
.so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-input {
  margin-bottom: 4px;
}
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-item,
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-ellipsis,
.so-treeSelect-small .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-input {
  margin-bottom: 2px;
}
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-item,
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-ellipsis,
.so-treeSelect-large .so-treeSelect-title-box .so-treeSelect-result .so-treeSelect-input {
  margin-bottom: 4px;
}
.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-ltr,
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-ltr {
  padding-left: 8px;
  padding-right: 30px;
}
.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-small.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-title-box-title-rtl,
.so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-title-box .so-treeSelect-result-rtl {
  padding-left: 30px;
  padding-right: 8px;
}
.so-tree-node .so-treeSelect-match {
  padding: 12px;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}
.so-input-rtl .so-tree-node .so-treeSelect-match,
so-treeSelect-rtl .so-tree-node .so-treeSelect-match {
  left: auto;
  right: 0;
}
.so-tree-node .so-treeSelect-match > span {
  position: absolute;
  right: 5px;
  width: 3px;
  height: 3px;
  background: var(--gray-500, #adb5bd);
  border-radius: 50%;
  margin-top: -1px;
  text-align: left;
}
.so-tree-node .so-treeSelect-match > span:after,
.so-tree-node .so-treeSelect-match > span:before {
  display: inline-block;
  content: '';
  width: 3px;
  height: 3px;
  background: var(--gray-500, #adb5bd);
  border-radius: 50%;
  position: absolute;
}
.so-tree-node .so-treeSelect-match > span:before {
  -webkit-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
          transform: translateX(-5px);
}
.so-tree-node .so-treeSelect-match > span:after {
  -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
          transform: translateX(-10px);
}
.so-tree-node .so-treeSelect-match.so-treeSelect-full {
  background: var(--primary-color-fade-10, rgba(51, 153, 255, 0.1));
}
.so-tree-node .so-treeSelect-match.so-treeSelect-full > span,
.so-tree-node .so-treeSelect-match.so-treeSelect-full > span:after,
.so-tree-node .so-treeSelect-match.so-treeSelect-full > span:before {
  background: var(--primary-color, #3399ff);
}