/* ==========================================================================
   FORM FIELDS
   The stylesheet that came with the Angular components in resources/inputs,
   translated from SCSS to plain CSS (the storefront has no build step):
     $primary            -> var(--input-primary)
     $text-muted         -> var(--bs-secondary-color)
     opacify/adjust-color -> color-mix()
   Nested rules are flattened; nothing else is changed. A handful of classes
   the markup uses came from the Angular app's own stylesheet rather than
   Bootstrap (.fs-7, .empty-hidden, .trimmed-text, .btn-no-style,
   .cursor-pointer, .custom-scrollbar-container) and are defined at the end.
   ========================================================================== */

:root {
  --input-primary: var(--cobalt);
  --input-field-border-color: var(--line);

  /* The surface a field sits on. Named for what the Angular app used it for
     (masking the autofill yellow with an inset shadow), but it has to be
     opaque: it is also the background of a compact field and of the open
     dropdown, which overlaps the content below it. */
  --transparent-var: var(--white);
}

.form-label.disabled {
  color: var(--bs-secondary-color);
  cursor: default;
}

.form-check-input {
  margin: 0;
  padding: .5rem;
  cursor: pointer;
  min-width: 24px;
  min-height: 24px;
}

.form-check-input:hover, .form-check-input:focus, .form-check-input:focus-visible {
  border-color: var(--input-primary);
}

.form-check-input:disabled {
  cursor: default;
}

.form-control {
  border: 2px solid var(--input-field-border-color);
  background-color: var(--bs-light);
}

.form-control:focus {
  box-shadow: none !important;
  border-color: var(--input-primary) !important;
  background-color: var(--bs-light);
}

.form-check-input:checked:focus-visible {
  box-shadow: 0 0 7px color-mix(in srgb, var(--input-primary) 60%, transparent);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px var(--transparent-var) inset;
  -webkit-text-fill-color: var(--bs-dark);
}

.floating-input {
  width: 100%;
  position: absolute;
  z-index: 2;
}

.floating-input:focus, .floating-input:focus-visible, .floating-input:not(:empty), .floating-input.input-filled {
  top: 1.2rem;
  z-index: 1;
}

.floating-label {
  position: relative;
  pointer-events: none;
  opacity: 1;
  top: 0;
  z-index: 1;
  font-size: 1.2em;
  transition: .2s ease-in all;
  color: var(--field-labels-color);
}

.floating-label:has(~ .floating-input:focus), .floating-label:has(~ .floating-input.input-filled) {
  top: -0.6rem;
  font-size: .9em;
  pointer-events: auto;
  z-index: 2;
}

.input-dotted-border {
  border: 2px dashed var(--input-field-border-color);
  color: var(--bs-secondary-color);
  transition: .2s ease-in all;
  cursor: pointer;
  background: transparent;
  outline: none;
}

.input-dotted-border:hover, .input-dotted-border:focus, .input-dotted-border:focus-visible {
  border: 2px dashed color-mix(in srgb, var(--input-primary) 50%, transparent);
  color: var(--input-primary);
}

.input-field-wrapper {
  --field-border-color: var(--input-field-border-color);
  --field-labels-color: #4E4740;
  position: relative;
}

.input-field-wrapper:has(input:focus),
.input-field-wrapper:has(textarea:focus),
.input-field-wrapper:has(.selector-open),
.input-field-wrapper:has(.input-field:focus-visible) {
  --field-border-color: var(--input-primary);
}

.input-field-wrapper:has(input:focus) svg,
.input-field-wrapper:has(textarea:focus) svg,
.input-field-wrapper:has(.selector-open) svg,
.input-field-wrapper:has(.input-field:focus-visible) svg {
  fill: var(--input-primary) !important;
}

.input-field-wrapper:has(input:focus) .bi,
.input-field-wrapper:has(textarea:focus) .bi,
.input-field-wrapper:has(.selector-open) .bi,
.input-field-wrapper:has(.input-field:focus-visible) .bi {
  color: var(--input-primary);
}

.input-field-wrapper:has(> .input-field.error-input) {
  --field-border-color: var(--bs-danger) !important;
}

.input-field-wrapper:has(> .input-field.error-input) svg { fill: #E66A83 !important; }
.input-field-wrapper:has(> .input-field.error-input) .bi { color: #E66A83 !important; }

.input-field-wrapper:has(> .input-field:not(.selector-field) input:disabled),
.input-field-wrapper:has(> .selector-field select:disabled) {
  --field-border-color: #D6D4D3 !important;
  --field-labels-color: #CFCFCF !important;
}

.input-field-wrapper .input-tooltip {
  outline: none;
  background: var(--transparent-var);
  color: var(--field-border-color);
  border-radius: 100%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -9px;
  right: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s ease-in all;
}

.input-field-wrapper .input-tooltip i { outline: none; }

.input-field-wrapper .input-tooltip:hover,
.input-field-wrapper .input-tooltip i:focus-visible {
  color: color-mix(in srgb, var(--field-border-color) 60%, black);
}

.input-field-wrapper:has(> .input-mode-compact) .input-tooltip { display: none; }

.input-field, .selector-field {
  --input-field-textarea-height: 150px;

  border: 1px solid var(--field-border-color);
  border-radius: var(--input-field-border-radius);
  box-sizing: border-box;
  transition: .2s ease-in all;
  position: relative;
  color: var(--bs-dark);
  outline: none;
}

.input-field.input-mode-floating, .selector-field.input-mode-floating {
  min-height: 3.44rem;
  max-height: 3.44rem;
  height: 3.44rem;
  padding: 0 .8rem;
  --input-field-border-radius: var(--bs-border-radius-lg);
  --input-field-font-size: 1.25rem;
}

.input-field.input-mode-floating.input-field-type-textarea {
  min-height: var(--input-field-textarea-height) !important;
  max-height: var(--input-field-textarea-height) !important;
  height: var(--input-field-textarea-height) !important;
}

.input-field.input-mode-floating.input-field-type-textarea .input-field-container { justify-content: start; }
.input-field.input-mode-floating.input-field-type-textarea .floating-input {
  height: calc(100% - .8rem * 2);
  resize: none;
}
.input-field.input-mode-floating.input-field-type-textarea .floating-label { margin-top: .9rem; }

.input-field.input-mode-floating .autocomplete-option label,
.selector-field.input-mode-floating .autocomplete-option label { padding: .25rem .8rem; }

.input-field.input-mode-compact, .selector-field.input-mode-compact {
  padding: .2rem .5rem;
  height: 2.375rem;
  background-color: var(--transparent-var);
  --input-field-border-radius: var(--bs-border-radius-sm);
  --input-field-font-size: 1rem;
}

.input-field.input-mode-compact .autocomplete-option label,
.selector-field.input-mode-compact .autocomplete-option label { padding: .2rem .5rem; }

.input-field .input-field-container, .selector-field .input-field-container { justify-content: center; }
.input-field .select-chevron, .selector-field .select-chevron { font-size: var(--input-field-font-size); }

.selector-field.input-mode-floating { padding-right: 1.5rem; }

.input-field select, .selector-field select {
  pointer-events: none !important;
  border: none;
  font-size: var(--input-field-font-size);
  appearance: none;
}

.input-field select.placeholder-selected,
.selector-field select.placeholder-selected { color: var(--bs-secondary-color); }

.input-field input, .input-field textarea,
.selector-field input, .selector-field textarea {
  outline: 0;
  font-size: var(--input-field-font-size) !important;
}

.input-field input:disabled, .input-field textarea:disabled,
.selector-field input:disabled, .selector-field textarea:disabled { pointer-events: none; }

.input-field input::placeholder, .input-field textarea::placeholder,
.selector-field input::placeholder, .selector-field textarea::placeholder {
  transition: .2s ease-in color;
  font-weight: 500 !important;
}

.input-field:not(.selector-field) .floating-input::placeholder { color: transparent; }

.input-field:has(input:focus) input::placeholder,
.input-field:has(textarea:focus) input::placeholder,
.input-field:focus-visible input::placeholder { color: var(--bs-secondary-color) !important; }

.input-field > * .autocomplete-option-selected,
.selector-field > * .autocomplete-option-selected { background-color: #EFE4DB !important; }

.input-field.error-input, .selector-field.error-input { color: #4E2326 !important; }

.input-field.error-input:has(input:focus) input::placeholder,
.input-field.error-input:has(textarea:focus) input::placeholder { color: #7b5d61 !important; }

.input-field.error-input .floating-label, .selector-field.error-input .floating-label {
  color: #7B0D0D !important;
  opacity: .88 !important;
}

.input-field.error-input .autocomplete-container, .selector-field.error-input .autocomplete-container {
  width: 100%;
  border-top: 0 !important;
}

.selector-field { cursor: pointer; }
.selector-field input:disabled { color: var(--bs-dark) !important; }

.input-field:not(.selector-field):has(input:disabled),
.selector-field:has(select:disabled) {
  color: #bbbcbd !important;
  pointer-events: none;
}

.input-field:not(.selector-field):has(input:disabled),
.input-field:not(.selector-field):has(input:disabled) > *,
.selector-field:has(select:disabled),
.selector-field:has(select:disabled) > * { cursor: not-allowed !important; }

.input-field:not(.selector-field):has(input:disabled) .enable-icon-container,
.selector-field:has(select:disabled) .enable-icon-container {
  outline: none;
  position: relative;
  z-index: 2;
  transition: .2s ease-in color;
}

.input-field:not(.selector-field):has(input:disabled) .enable-icon-container svg,
.selector-field:has(select:disabled) .enable-icon-container svg {
  pointer-events: all !important;
  cursor: pointer !important;
  fill: var(--input-field-border-color) !important;
}

.input-field:not(.selector-field):has(input:disabled) .enable-icon-container:hover svg,
.input-field:not(.selector-field):has(input:disabled) .enable-icon-container:focus svg,
.input-field:not(.selector-field):has(input:disabled) .enable-icon-container:focus-visible svg,
.selector-field:has(select:disabled) .enable-icon-container:hover svg,
.selector-field:has(select:disabled) .enable-icon-container:focus svg,
.selector-field:has(select:disabled) .enable-icon-container:focus-visible svg {
  fill: var(--input-primary) !important;
}

.input-field:not(.selector-field):has(input:disabled) > * .floating-label,
.selector-field:has(select:disabled) > * .floating-label {
  color: #bbbcbd !important;
  opacity: 1 !important;
}

.input-field:not(.selector-field):has(input:disabled) > * svg,
.selector-field:has(select:disabled) > * svg { fill: #bbbcbd !important; }

.selector-field.input-mode-floating:has(select:disabled) input::placeholder { color: #bbbcbd !important; }

.input-field > * svg, .selector-field > * svg {
  fill: var(--field-labels-color);
  transition: .2s ease-in fill;
}

.input-field .bi, .selector-field .bi {
  color: var(--field-labels-color);
  transition: .2s ease-in color;
}

.input-field .autocomplete-container, .selector-field .autocomplete-container {
  width: 100%;
  box-sizing: content-box;
  left: 0;
  transform: translateX(-2px);
  top: calc(100% - 2px);
  padding: 0 !important;
  border: 2px solid var(--field-border-color);
  border-top: 0;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background-color: var(--transparent-var);
  box-shadow: var(--shadow-md);
}

.input-field .autocomplete-container .autocomplete-content,
.selector-field .autocomplete-container .autocomplete-content {
  content-visibility: hidden;
  pointer-events: none;
  outline: none;
  max-height: 0;
  transition: max-height .2s ease-in;
}

.input-field .autocomplete-container input, .selector-field .autocomplete-container input {
  position: absolute;
  left: 0;
  opacity: 0;
}

.input-field .autocomplete-option, .selector-field .autocomplete-option {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 400 !important;
}

.input-field .autocomplete-option[data-value=""],
.selector-field .autocomplete-option[data-value=""] { opacity: .7; }

.input-field .autocomplete-option:has(> input:checked),
.selector-field .autocomplete-option:has(> input:checked) { background-color: #EFE4DB; }

.input-field .autocomplete-option:hover, .input-field .autocomplete-option.active,
.selector-field .autocomplete-option:hover, .selector-field .autocomplete-option.active {
  background-color: #FAF1EA;
}

.input-field .autocomplete-option .input-option-label,
.selector-field .autocomplete-option .input-option-label {
  padding: .2rem .55rem;
  font-size: var(--input-field-font-size);
  width: 100%;
  cursor: pointer;
}

/* ---- the open state ----
   These carry the same specificity as the closed-state rules above, so they
   have to come after them: in the SCSS they were nested inside the field. */
.selector-open {
  box-sizing: border-box;
  border-radius: var(--input-field-border-radius) var(--input-field-border-radius) 0 0 !important;
}

.selector-open .autocomplete-container {
  opacity: 1 !important;
  pointer-events: all;
  border-top: 0;
  border-radius: 0 0 var(--input-field-border-radius) var(--input-field-border-radius);
}

.selector-open .autocomplete-container .autocomplete-content {
  content-visibility: visible;
  pointer-events: auto;
  max-height: 200px;
}

/* ---- classes the components use that are not Bootstrap's ---- */
.fs-7 { font-size: .8rem; }
.empty-hidden:empty { display: none; }
.cursor-pointer { cursor: pointer; }
.trimmed-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-no-style { background: none; border: 0; padding: 0; }
.custom-scrollbar-container { scrollbar-width: thin; }

/* The dropdown has to escape the field's rounded box, and the field sits in a
   grid cell that would otherwise clip it. */
.input-field-wrapper { z-index: 1; }
.input-field-wrapper:has(.selector-open) { z-index: 5; }