bs-input {
  display: inline-block;
  width: 100%;
  /* Generally applicable (all input types) */
  /* Errors and Messages */
  /* Fieldset */
  /* Errors and Messages */
  /*
  Removes the built-in 'margin' on bottom of textarea
  see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
  :has not fully supported yet but will work for most
  */
  /* chrome user agent styling was applying opacity: 0.7 */
  /* Select */
}
bs-input :where(label, legend) {
  --label-color: var(--bs-ink-base);
  color: var(--label-color);
  display: inline-block;
  font-size: var(--bs-text-sm);
  font-weight: 600;
  line-height: var(--bs-leading-base);
  width: 100%;
}
bs-input :where([data-required]) {
  color: var(--bs-red-500);
}
bs-input :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
  --label-color: var(--bs-ink-light);
}
bs-input :where([data-required]) {
  color: var(--bs-red-500);
  font-weight: var(--bs-font-bold, 600);
}
bs-input :where([data-disabled], [data-disabled] [data-required]) {
  color: var(--bs-gray-400);
}
bs-input :where(.box) :is(input, textarea, select):where(:focus-visible) {
  --offset-color: var(--bs-bg-subtle);
}
bs-input :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
  --offset-color: var(--bs-bg-invert);
}
bs-input :is(input, select, textarea):where([data-error]) {
  --input-border: var(--bs-red-500);
}
bs-input :where(fieldset) {
  border: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
bs-input :where(fieldset legend) {
  margin-bottom: 0.25rem;
  padding: 0;
}
bs-input :where(label + input, label > input):where(:not([type="checkbox"], [type="radio"])),
bs-input :where(label + textarea, label > textarea),
bs-input :where(label + select, label > select) {
  margin-top: 0.25rem;
}
bs-input input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])),
bs-input textarea, bs-input select {
  appearance: none;
  background-color: var(--input-bg, var(--bs-bg-base));
  border-color: var(--input-border, var(--bs-violet-300));
  border-radius: 0.25rem;
  border-style: solid;
  border-width: var(--input-border-width, 1px);
  caret-color: var(--bs-blue-400);
  color: var(--bs-ink-base);
  font-size: var(--bs-text-base);
  font-weight: 400;
  height: 2.5rem;
  line-height: var(--bs-leading-base);
  min-height: 2.5rem;
  padding-inline: 0.75rem;
  width: 100%;
}
bs-input input:where([type="text"], [type="email"], [type="url"]),
bs-input select {
  text-overflow: ellipsis;
}
bs-input textarea {
  height: auto;
  padding-block: 0.5rem;
  resize: vertical;
}
bs-input :is(input, textarea, select)::placeholder {
  color: var(--bs-violet-200);
}
bs-input :is(input, textarea, select):where(:focus-visible)::placeholder {
  opacity: 0;
}
bs-input :is(input:where(:not([type="checkbox"], [type="radio"])), textarea, select):where(:focus-visible) {
  --input-border: var(--bs-blue-400);
  outline-width: 0px;
}
bs-input :is(input:where(:not([type="checkbox"],[type="radio"])), textarea, select):where(:disabled) {
  --input-border: var(--bs-gray-400);
  background-color: var(--bs-gray-200);
  color: var(--bs-gray-400);
}
bs-input :is(input, select, textarea):where([data-error]) {
  --input-border: var(--bs-red-500);
}
bs-input :has(> textarea:only-child) {
  display: block;
  line-height: 0;
}
bs-input :where(select:disabled) {
  opacity: 1;
}
bs-input :is(input, textarea, select):disabled::placeholder,
bs-input :is(input, textarea, select)[disabled]::placeholder {
  color: var(--bs-gray-400);
  opacity: 1;
}
bs-input select {
  /* URL Encoded SVG dropdown caret so there is something there */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-right: var(--bs-space-9);
}
bs-input .dark select {
  /* URL Encoded SVG dropdown caret so there is something there */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
}
bs-input .dark select:disabled {
  /* URL Encoded SVG dropdown caret so there is something there */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
}

bs-label + bs-input input:not([type^=checkbox], [type^=radio]) {
  margin-top: 0.25rem;
}

:where(.box) bs-input :where(input, textarea, select):focus {
  --offset-color: var(--bs-bg-subtle);
}

:where(.box[data-invert]) bs-input :where(input, textarea, select):focus {
  --offset-color: var(--bs-bg-invert);
}