.field {
  --height: 3rem;
  --padding: 0.5rem;
  --border-radius: 0.3rem;
  --border-color: #d1d5db;
  --border-color-focus: #d1d5db;

  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: fit-content;
  height: var(--height);
  color: var(--text-color);
  border-radius: 0.3rem;
  border: #d1d5db 2px solid;
  /*background: #283542;*/
  overflow: clip;
  backdrop-filter: blur(2px);
  align-items: center;
}

.field[data-empty] button.tsiClear {
  display: none;
}

.field button {
  transition: all 0.3s ease-in-out;
}

:global(.dark).field {
  color: var(--text-color);
  border: #23272f 2px solid;
  background: #151515;
}

.tsiSelect {
  position: relative;
  color: #13161a;
  border-right: #cdcdcd 2px solid;
  background-color: #e6e6e6;
}

.tsiButton {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  width: 6rem;
  height: var(--height);
  background: transparent;

  border: none;
  outline: none;
}

.tsiButton[data-focus-visible] {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: -1px;
} 

.tsiSelectValue {
  padding-left: 0.75rem;
}

.tsiSelectValue[data-placeholder] {
  font-style: italic;
  color: var(--text-color-placeholder);
}

.tsi-Select span[aria-hidden] {
  position: absolute;
  right: 0.25rem;
  width: 1.5rem;
  line-height: 1.375rem;
  padding: 1px;
  background: var(--highlight-background);
  color: var(--highlight-foreground);
  forced-color-adjust: none;
  border-radius: 4px;
  font-size: 0.857rem;
}

:global(.dark) .tsiSelect {
  position: relative;
  color: #e6e6e6;
  border-right: #31363b 2px solid;
  background-color: #1f2937;
}

.tsiPopover[data-trigger="Select"] .tsiListBox {
  display: block;
  width: 6rem;
  max-height: inherit;
  min-height: unset;
  border: #d5d5db 1px solid;
  border-radius: 6px;
  overflow: clip;
  background-color: white;
  padding: 4px;
}

.tsiPopover[data-trigger="Select"] .tsiListBoxItem {
  padding: 0.286rem 0.571rem 0.286rem 0.571rem;
  border-radius: 4px;
  color: #334155;
  transition: background-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;

  &[data-focus-visible] {
    outline: none;
  }

  &[data-focused],
  &[data-pressed] {
    background: #e2e8f0;
  }

  &[data-selected] {
    font-weight: 600;
    background: #2563eb;
    color: white;
    position: relative;
  }
}

.tsiPopover[data-trigger="Select"] {
  &[data-entering] {
    animation: popover-slide 200ms;
  }

  &[data-exiting] {
    animation: popover-slide 200ms reverse ease-in;
  }
}

:global(.dark) .tsiPopover[data-trigger="Select"] {
  .tsiListBox {
    border: #686868 1px solid;
    background-color: #101010;
  }

  .tsiListBoxItem {
    color: #e1e1e1;
    &[data-focused],
    &[data-pressed] {
      background: #3f3f46;
    }
    &[data-selected] {
      background: #2563eb;
      color: white;
    }
  }
}

.tsiInput,
.tsiTextArea {
  padding: 0.286rem;
  margin: 0;
  background: transparent;
  font-size: 1.143rem;
  color: var(--field-text-color);
  border: none;
  outline: none;
  width: 18rem;

  &[data-focused] {
    outline-offset: -1px;
  }

  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  &::placeholder {
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .tsiInput,
  .tsiTextArea {
    width: 60%;
    font-size: 0.9rem;
  }

  .field {
    --height: 2.2rem;
  }

  .tsiSelect .tsiButton {
    width: 4.8rem;
    font-size: 1rem;
  }
}



.tsiClear {
  position: absolute;
  color: #4b5563;
  right: 3.3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
}

.tsiClear:hover {
  color: #64748b;
  cursor: pointer;
  background-color: #e6e6e6;
}

.tsiConfirm {
  border: none;
  outline: none;
  height: 100%;
  width: var(--height);
  color: #4b5563;
  position: relative;
}

.tsiConfirm:hover {
  color: #64748b;
  cursor: pointer;
  background-color: #F1F2F5;
}

.tsiConfirm svg {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
}

:global(.dark) .tsiConfirm {
  color: #99aeb3;
}

@keyframes popover-slide {
  from {
    transform: var(--origin);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
