/* Shared, accessible form controls. @author ZQ */

/* Applied only after JavaScript has provided the custom control. */
select.tg-select__source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

.tg-select {
  --tg-select-ink: #22334f;
  --tg-select-muted: #647187;
  --tg-select-line: #d5deeb;
  --tg-select-blue: #0750ec;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--tg-select-ink);
  text-align: start;
}

.tg-select__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--tg-select-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tg-select-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.tg-select__trigger:hover:not([aria-disabled="true"]) {
  border-color: #94ade0;
  background: #fcfdff;
}

.tg-select__trigger:focus-visible,
.tg-select.is-open .tg-select__trigger {
  outline: 2px solid var(--tg-select-blue);
  outline-offset: 3px;
  border-color: var(--tg-select-blue);
}

.tg-select__value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tg-select.is-placeholder .tg-select__value { color: var(--tg-select-muted); }

.tg-select__chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #647b9f;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}

.tg-select.is-open .tg-select__chevron { transform: rotate(180deg); }
.tg-select__trigger[aria-disabled="true"] { cursor: not-allowed; background: #f0f3f8; color: #7a8799; }
.tg-select.is-invalid .tg-select__trigger { border-color: #bd3447; }

.tg-select__error {
  display: block;
  margin: 7px 0 0;
  color: #b32e40;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

.tg-select__error[hidden] { display: none; }
.form-grid > label > .tg-select { margin-top: 9px; }
.field > .tg-select { margin-top: 0; }
.filters > .tg-select { flex: 1 1 auto; width: auto; min-width: 116px; }
.tg-select--compact .tg-select__trigger { min-height: 38px; padding: 8px 11px; font-size: 12px; border-radius: 6px; }
.tg-select--admin .tg-select__trigger { min-height: 42px; padding: 10px 12px; font-size: 13px; border-radius: 7px; }
.tg-select--admin.tg-select--compact .tg-select__trigger { min-height: 38px; padding: 8px 11px; font-size: 12px; }

.tg-select__panel {
  box-sizing: border-box;
  position: fixed;
  z-index: 10050;
  inset: auto;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #22334f;
  box-shadow: 0 12px 40px #091d4133, 0 2px 8px #091d411a;
  font: 14px/1.5 "Tianguang Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: start;
  overflow: hidden;
  overscroll-behavior: contain;
  animation: tg-select-reveal 160ms cubic-bezier(.16,1,.3,1) both;
}

.tg-select__panel[hidden] { display: none !important; }
.tg-select__panel::backdrop { background: transparent; }
.tg-select__panel--admin { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; }
.tg-select__search { position: relative; padding: 3px 3px 8px; }
.tg-select__search[hidden] { display: none; }
.tg-select__search svg { position: absolute; top: 15px; left: 14px; width: 16px; height: 16px; color: #65738b; pointer-events: none; }

.tg-select__search .tg-select__search-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  min-width: 0;
  margin: 0;
  padding: 9px 10px 9px 34px;
  border: 1px solid #d5deeb;
  border-radius: 6px;
  background: #f5f7fb;
  color: #22334f;
  outline: none;
  font: inherit;
  line-height: 1.5;
  caret-color: #0750ec;
}

.tg-select__search .tg-select__search-input:focus { border-color: #0750ec; background: #fff; box-shadow: inset 0 0 0 1px #0750ec; }
.tg-select__search .tg-select__search-input::placeholder { color: #647187; opacity: 1; }
.tg-select__list { max-height: 272px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7c6df transparent; }
.tg-select__list::-webkit-scrollbar { width: 5px; }
.tg-select__list::-webkit-scrollbar-thumb { background: #b7c6df; border-radius: 4px; }
.tg-select__group { padding: 10px 11px 4px; color: #637087; font-size: 11px; font-weight: 600; }

.tg-select__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 11px;
  border-radius: 5px;
  color: #273b59;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background-color 100ms ease, color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.tg-select__option > span { min-width: 0; }
.tg-select__option svg { flex: 0 0 16px; width: 16px; height: 16px; visibility: hidden; }
.tg-select__option[aria-selected="true"] { color: #0647d4; font-weight: 600; background: #edf3ff; }
.tg-select__option[aria-selected="true"] svg { visibility: visible; }
.tg-select__option.is-active { color: #fff; background: #0750ec; }
.tg-select__option[aria-disabled="true"] { color: #7c889b; cursor: not-allowed; background: transparent; }
.tg-select__option[aria-disabled="true"] svg { visibility: hidden; }
.tg-select__empty { margin: 0; padding: 22px 12px; color: #647187; font-size: 13px; line-height: 1.7; text-align: center; }
.tg-select__count { padding: 7px 11px 3px; border-top: 1px solid #edf0f6; margin-top: 4px; color: #647187; font-size: 11px; }

@keyframes tg-select-reveal { from { opacity: .3; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .tg-select__trigger { min-height: 48px; }
  .tg-select__search .tg-select__search-input { font-size: 16px; }
  .tg-select__option { min-height: 46px; }
  .filters > .tg-select { min-width: 0; }
}

@media (forced-colors: active) {
  .tg-select__trigger, .tg-select__panel { border: 1px solid ButtonText; }
  .tg-select__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .tg-select__option[aria-selected="true"] { text-decoration: underline; }
}