.input-group {
  --size: 40px;
  --font-size: 1rem;
  position: relative;
  display: flex;
  width: auto;
  align-items: stretch;
  flex-wrap: nowrap;
}
.input-group:where(:has(input, textarea, select, .select)) {
  width: 300px;
}
.input-group--row {
  flex-direction: row;
}
.input-group--row > input,
.input-group--row > textarea,
.input-group--row > select,
.input-group--row > label,
.input-group--row > .input-group__button,
.input-group--row > .input-group__text {
  flex: none;
}
.input-group--row > input:not(:first-child),
.input-group--row > textarea:not(:first-child),
.input-group--row > select:not(:first-child),
.input-group--row > label:not(:first-child),
.input-group--row > .input-group__button:not(:first-child),
.input-group--row > .input-group__text:not(:first-child) {
  margin-left: -1px;
}
.input-group--row > input:last-child,
.input-group--row > textarea:last-child,
.input-group--row > select:last-child,
.input-group--row > label:last-child,
.input-group--row > .input-group__button:last-child,
.input-group--row > .input-group__text:last-child {
  border-bottom-right-radius: var(--dt-radius-md);
  border-top-right-radius: var(--dt-radius-md);
}
.input-group--row > input:first-child,
.input-group--row > textarea:first-child,
.input-group--row > select:first-child,
.input-group--row > label:first-child,
.input-group--row > .input-group__button:first-child,
.input-group--row > .input-group__text:first-child {
  border-bottom-left-radius: var(--dt-radius-md);
  border-top-left-radius: var(--dt-radius-md);
}
.input-group--row > input:where(input, textarea, select),
.input-group--row > textarea:where(input, textarea, select),
.input-group--row > select:where(input, textarea, select),
.input-group--row > label:where(input, textarea, select),
.input-group--row > .input-group__button:where(input, textarea, select),
.input-group--row > .input-group__text:where(input, textarea, select) {
  flex: 1;
}
.input-group--row > .select {
  flex: 1;
}
.input-group--row > .select:not(:first-child) {
  margin-left: -1px;
}
.input-group--row > .select:last-child .select__trigger {
  border-bottom-right-radius: var(--dt-radius-md);
  border-top-right-radius: var(--dt-radius-md);
}
.input-group--row > .select:first-child .select__trigger {
  border-bottom-left-radius: var(--dt-radius-md);
  border-top-left-radius: var(--dt-radius-md);
}
.input-group--column {
  flex-direction: column;
}
.input-group--column > input,
.input-group--column > textarea,
.input-group--column > select,
.input-group--column > label,
.input-group--column > .input-group__button,
.input-group--column > .input-group__text {
  min-height: var(--size);
}
.input-group--column > input:not(:first-child),
.input-group--column > textarea:not(:first-child),
.input-group--column > select:not(:first-child),
.input-group--column > label:not(:first-child),
.input-group--column > .input-group__button:not(:first-child),
.input-group--column > .input-group__text:not(:first-child) {
  margin-top: -1px;
}
.input-group--column > input:last-child,
.input-group--column > textarea:last-child,
.input-group--column > select:last-child,
.input-group--column > label:last-child,
.input-group--column > .input-group__button:last-child,
.input-group--column > .input-group__text:last-child {
  border-bottom-right-radius: var(--dt-radius-md);
  border-bottom-left-radius: var(--dt-radius-md);
}
.input-group--column > input:first-child,
.input-group--column > textarea:first-child,
.input-group--column > select:first-child,
.input-group--column > label:first-child,
.input-group--column > .input-group__button:first-child,
.input-group--column > .input-group__text:first-child {
  border-top-right-radius: var(--dt-radius-md);
  border-top-left-radius: var(--dt-radius-md);
}
.input-group--column > .select:not(:first-child) {
  margin-top: -1px;
}
.input-group--column > .select:last-child .select__trigger {
  border-bottom-right-radius: var(--dt-radius-md);
  border-bottom-left-radius: var(--dt-radius-md);
}
.input-group--column > .select:first-child .select__trigger {
  border-top-right-radius: var(--dt-radius-md);
  border-top-left-radius: var(--dt-radius-md);
}
.input-group--full-width {
  width: 100%;
}
.input-group > input,
.input-group > textarea,
.input-group > select,
.input-group > .select .select__trigger,
.input-group > label,
.input-group > .input-group__button,
.input-group > .input-group__text {
  position: relative;
  font-size: var(--font-size, 1rem);
  height: var(--size, 40px);
  padding: 0.5em 1em;
  margin: 0;
  border-radius: 0;
}
.input-group > input:focus, .input-group > input:hover,
.input-group > textarea:focus,
.input-group > textarea:hover,
.input-group > select:focus,
.input-group > select:hover,
.input-group > .select .select__trigger:focus,
.input-group > .select .select__trigger:hover,
.input-group > label:focus,
.input-group > label:hover,
.input-group > .input-group__button:focus,
.input-group > .input-group__button:hover,
.input-group > .input-group__text:focus,
.input-group > .input-group__text:hover {
  z-index: 3;
}
.input-group > input:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > textarea:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > select:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > .select .select__trigger:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > label:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > .input-group__button:not(input, select, .select__trigger, textarea, .input-group__button),
.input-group > .input-group__text:not(input, select, .select__trigger, textarea, .input-group__button) {
  border: 1px solid var(--dt-color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em;
}
.input-group > .input-group__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #F4F7FC;
}
.input-group > .input-group__button:hover, .input-group > .input-group__button:focus-visible, .input-group > .input-group__button:active {
  z-index: 1;
}
.input-group:where(.input-group--button-full-width) > .input-group__button {
  flex: 1;
}
.input-group > input,
.input-group > select,
.input-group > .select .select__trigger,
.input-group > textarea {
  min-width: 0;
}
.input-group--xxs {
  --size: 20px;
  --font-size: 0.7rem;
}
.input-group--xs {
  --size: 24px;
  --font-size: 0.8rem;
}
.input-group--sm {
  --size: 32px;
  --font-size: 0.9rem;
}
.input-group--md {
  --size: 40px;
  --font-size: 1rem;
}
.input-group--lg {
  --size: 48px;
  --font-size: 1.1rem;
}
.input-group--xl {
  --size: 56px;
  --font-size: 1.2rem;
}
.input-group--xxl {
  --size: 60px;
  --font-size: 1.3rem;
}