.ty-select {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: var(--ty-select-font-size-md, var(--ty-font-size-base));
  cursor: pointer;
  outline: none;
}
.ty-select_disabled {
  cursor: not-allowed;
  opacity: var(--ty-select-opacity-disabled);
}
.ty-select_disabled .ty-select__selector {
  background-color: var(--ty-select-bg-disabled, var(--ty-color-bg-disabled));
  cursor: not-allowed;
}
.ty-select_sm .ty-select__selector {
  height: var(--ty-select-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
  min-height: var(--ty-select-height-sm, var(--ty-control-height-sm, var(--ty-height-sm)));
  font-size: var(--ty-select-font-size-sm, var(--ty-control-font-size-sm, var(--ty-font-size-sm)));
  padding: 0 var(--ty-select-padding-inline-end-sm, calc(var(--ty-control-padding-inline-sm, 8px) + 16px)) 0 var(--ty-select-padding-inline-start-sm, var(--ty-control-padding-inline-sm, 8px));
}
.ty-select_md .ty-select__selector {
  height: var(--ty-select-height-md, var(--ty-control-height-md, var(--ty-height-md)));
  min-height: var(--ty-select-height-md, var(--ty-control-height-md, var(--ty-height-md)));
  font-size: var(--ty-select-font-size-md, var(--ty-control-font-size-md, var(--ty-font-size-base)));
  padding: 0 var(--ty-select-padding-inline-end-md, calc(var(--ty-control-padding-inline-md, 12px) + 18px)) 0 var(--ty-select-padding-inline-start-md, var(--ty-control-padding-inline-md, 12px));
}
.ty-select_lg .ty-select__selector {
  height: var(--ty-select-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
  min-height: var(--ty-select-height-lg, var(--ty-control-height-lg, var(--ty-height-lg)));
  font-size: var(--ty-select-font-size-lg, var(--ty-control-font-size-lg, var(--ty-font-size-lg)));
  padding: 0 var(--ty-select-padding-inline-end-lg, calc(var(--ty-control-padding-inline-lg, 16px) + 20px)) 0 var(--ty-select-padding-inline-start-lg, var(--ty-control-padding-inline-lg, 16px));
}
.ty-select_multiple .ty-select__selector {
  height: auto;
  padding-right: var(--ty-select-multiple-padding-inline-end, 28px);
}
.ty-select_multiple .ty-select__selection {
  flex-wrap: wrap;
  gap: var(--ty-select-multiple-gap, 4px);
  padding: var(--ty-select-multiple-padding-block, 2px) 0;
}
.ty-select_open .ty-select__selector {
  border-color: var(--ty-select-border-focus, var(--ty-input-border-focus, var(--ty-color-primary)));
  box-shadow: var(--ty-select-shadow-focus, var(--ty-input-shadow-focus, var(--ty-shadow-focus)));
}
.ty-select__selector {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--ty-select-border, var(--ty-input-border, var(--ty-color-border)));
  border-radius: var(--ty-select-radius, var(--ty-border-radius));
  background-color: var(--ty-select-bg, var(--ty-input-bg, var(--ty-color-bg-container)));
  box-shadow: var(--ty-select-shadow, var(--ty-input-shadow, none));
  box-sizing: border-box;
  transition: all 0.3s;
}
.ty-select__selector:hover {
  border-color: var(--ty-select-border-hover, var(--ty-input-border-hover, var(--ty-color-primary)));
}
.ty-select__selection {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}
.ty-select__selection-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ty-select-color, var(--ty-color-text));
}
.ty-select__placeholder {
  color: var(--ty-select-placeholder, var(--ty-color-text-placeholder));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.ty-select__search {
  flex: 1;
  min-width: var(--ty-select-search-min-width);
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  color: var(--ty-select-color, var(--ty-color-text));
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ty-select__search::-moz-placeholder {
  color: var(--ty-select-placeholder, var(--ty-color-text-placeholder));
}
.ty-select__search::placeholder {
  color: var(--ty-select-placeholder, var(--ty-color-text-placeholder));
}
.ty-select__suffix {
  position: absolute;
  right: var(--ty-select-suffix-offset-inline-end);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ty-select-suffix-size, 14px);
  height: var(--ty-select-suffix-size, 14px);
  color: var(--ty-select-suffix-color, var(--ty-color-text-quaternary));
}
.ty-select__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 300ms;
}
.ty-select__arrow_reverse {
  transform: rotate(180deg);
}
.ty-select__clear {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: var(--ty-select-suffix-size, 14px);
  color: var(--ty-select-clear-color, var(--ty-color-text-quaternary));
  background: var(--ty-select-clear-bg, var(--ty-select-bg, var(--ty-input-bg, var(--ty-color-bg-container))));
  cursor: pointer;
  transition: color 0.2s;
  border: none;
  padding: 0;
}
.ty-select__clear:hover {
  color: var(--ty-select-clear-color-hover, var(--ty-color-text-tertiary));
}
.ty-select_has-value:hover .ty-select__clear {
  display: inline-flex;
}
.ty-select__tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: var(--ty-select-tag-height, 22px);
  padding: var(--ty-select-tag-padding, 0 4px 0 8px);
  border-radius: var(--ty-select-tag-radius, var(--ty-select-radius, var(--ty-border-radius)));
  background-color: var(--ty-select-tag-bg, var(--ty-color-fill-secondary));
  font-size: var(--ty-select-tag-font-size, var(--ty-font-size-sm));
  line-height: var(--ty-select-tag-line-height, 20px);
  color: var(--ty-select-tag-color, var(--ty-color-text));
  box-sizing: border-box;
}
.ty-select__tag_max {
  padding: var(--ty-select-tag-padding-max, 0 8px);
}
.ty-select__tag-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ty-select__tag-close {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ty-select-tag-close-gap);
  cursor: pointer;
  color: var(--ty-select-tag-close-color, var(--ty-color-text-quaternary));
  transition: color 0.2s;
}
.ty-select__tag-close:hover {
  color: var(--ty-select-tag-close-color-hover, var(--ty-color-text));
}
.ty-select__dropdown {
  width: 100%;
  margin: 0;
  padding: var(--ty-select-dropdown-padding);
  list-style-type: none;
  background-color: var(--ty-select-dropdown-bg, var(--ty-color-bg-container));
  box-sizing: border-box;
  overflow: hidden auto;
  z-index: 10;
  box-shadow: var(--ty-select-dropdown-shadow, var(--ty-select-dropdown-shadow));
  border-radius: var(--ty-select-radius, var(--ty-border-radius));
  font-size: var(--ty-select-font-size-md, var(--ty-font-size-base));
  max-height: var(--ty-select-dropdown-max-height, var(--ty-select-dropdown-max-height));
}
.ty-select__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--ty-select-feedback-padding);
}
.ty-select__loading svg {
  animation: ty-select-spin 1s linear infinite;
}
.ty-select__empty {
  padding: var(--ty-select-feedback-padding);
  text-align: center;
  color: var(--ty-select-empty-color, var(--ty-color-text-quaternary));
  font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
}

.ty-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ty-select-option-padding, 7px 12px);
  font-size: var(--ty-select-option-font-size, var(--ty-font-size-base));
  line-height: var(--ty-select-option-line-height);
  cursor: pointer;
  color: var(--ty-select-option-color, var(--ty-color-text));
  transition: background-color 0.2s;
}
.ty-select-option__content {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ty-select-option__check {
  flex-shrink: 0;
  margin-left: var(--ty-select-option-check-gap);
  color: var(--ty-select-border-focus, var(--ty-input-border-focus, var(--ty-color-primary)));
}
.ty-select-option_active {
  background-color: var(--ty-select-option-active-bg, var(--ty-color-fill-secondary));
}
.ty-select-option_selected {
  background-color: var(--ty-select-option-selected-bg, var(--ty-color-primary-bg));
  font-weight: var(--ty-select-selected-font-weight, var(--ty-select-selected-font-weight, 500));
}
.ty-select-option_disabled {
  cursor: not-allowed;
  background-color: var(--ty-select-option-disabled-bg, var(--ty-color-bg-container));
  color: var(--ty-select-option-disabled-color, var(--ty-color-text-quaternary));
  opacity: var(--ty-select-option-disabled-opacity);
}

.ty-select-group__title {
  font-size: var(--ty-select-font-size-sm, var(--ty-font-size-sm));
  cursor: default;
  color: var(--ty-select-group-title-color);
  padding: var(--ty-select-option-padding, 7px 12px);
}
.ty-select-group__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.ty-select-group__list > .ty-select-option {
  padding-left: var(--ty-select-group-option-padding-inline-start);
}

@keyframes ty-select-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}