:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }slot-fb {
  display: contents !important;
}

:host([disabled]:not([disabled=false])) {
  opacity: 0.5;
  position: relative;
}
:host([disabled]:not([disabled=false]))::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: not-allowed;
}

.form-ctrl {
  min-inline-size: 100%;
  display: block;
}
.form-ctrl.has-helper-end {
  display: flex;
  gap: 1rem;
  container-type: inline-size;
}
.form-ctrl.has-helper-end .form-ctrl__wrapper {
  flex: 1 1 100%;
}
.form-ctrl.has-helper-end .form-ctrl__helper-end {
  display: none;
}
@container (min-width: 350px) {
  .form-ctrl.has-helper-end .form-ctrl__helper-end {
    display: block !important;
  }
  .form-ctrl.has-helper-end .form-ctrl__helper {
    display: none !important;
  }
}

.form-ctrl__wrapper {
  display: block;
}

label,
.form-ctrl__more,
.form-ctrl__error,
.form-ctrl__helper {
  display: block;
}
label.visually-hide,
.form-ctrl__more.visually-hide,
.form-ctrl__error.visually-hide,
.form-ctrl__helper.visually-hide {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}

.form-ctrl__float-label {
  padding-block: 0;
  padding-inline: var(--padding-start) 0;
  color: var(--label-color);
  position: absolute;
  font-size: 1em;
  transform: translateY(-50%);
  inset-block-start: 50%;
  transition: all 0.125s ease-in;
  opacity: 1;
}
:host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
  transform: none;
  font-size: 0.75em;
  opacity: 0.7;
  inset-block-start: var(--padding-top);
}
.form-ctrl__float-label .form-ctrl__label-charcount {
  opacity: 0;
  transition: opacity 0.125s ease-in;
}
:host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
  opacity: 1;
}

.form-ctrl__label {
  color: var(--label-color);
  font-size: var(--label-font-size);
  padding-block-end: var(--padding-bottom);
  line-height: 1;
  display: flex;
  align-items: center;
}
.form-ctrl__label .form-ctrl__label-wrap {
  flex: 1;
  overflow-x: clip;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.form-ctrl__label .form-ctrl__label-placeholder {
  margin-block: unset;
  margin-inline: 0 5px;
  opacity: 0;
  appearance: none;
  transition: 0.3s ease opacity;
  font-size: 0.85em;
}
.form-ctrl__label .form-ctrl__label-charcount {
  margin-block: unset;
  margin-inline: auto 0;
  font-size: var(--nano-font-size-2xs);
  opacity: 0.5;
}
:host(.has-value) .form-ctrl__label .form-ctrl__label-placeholder {
  opacity: 0.5;
}

.has-float-label .select__multi-input,
.has-float-label .select__native-input,
.has-float-label .input__native-ctrl {
  opacity: 0;
  transition: opacity 0.125s ease-in;
}
:host(.has-focus) .has-float-label .select__multi-input, :host(.has-value) .has-float-label .select__multi-input,
:host(.has-focus) .has-float-label .select__native-input,
:host(.has-value) .has-float-label .select__native-input,
:host(.has-focus) .has-float-label .input__native-ctrl,
:host(.has-value) .has-float-label .input__native-ctrl {
  opacity: 1;
}

.form-ctrl__more {
  position: relative;
  margin-block: var(--padding-bottom) 0;
  margin-inline: 0;
  opacity: 0;
  display: none;
  transition: all var(--nano-transition-fast) ease;
  transition-behavior: allow-discrete;
}
.form-ctrl__more > * {
  grid-column: 1;
  grid-row: 1;
}
.has-helper .form-ctrl__more, .has-error .form-ctrl__more {
  display: grid;
  opacity: 1;
}

.form-ctrl__helper,
.form-ctrl__error {
  font-size: var(--more-font-size);
  line-height: 1.2;
  transition: 0.3s ease-out opacity;
}

.form-ctrl__helper {
  font-style: italic;
  color: var(--help-msg-color);
}
:host([show-inline-error]:not([show-inline-error=false]).is-invalid) .form-ctrl__helper {
  opacity: 0;
}

.form-ctrl__helper-end {
  flex: 1 1 30%;
  min-inline-size: 150px;
  font-size: var(--invalid-msg-font-size);
  color: var(--help-msg-color);
  font-style: italic;
}

.form-ctrl__error {
  opacity: 0;
  color: var(--invalid-msg-color);
  font-style: italic;
}
:host(.is-invalid:not([disabled])) .form-ctrl__error {
  opacity: 1;
}

.form-ctrl__input {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  border-radius: var(--input-border-radius);
  inline-size: 100%;
  padding: 0 !important;
  position: relative;
  flex: 1 0 auto;
  display: flex;
  background: var(--input-bg-color);
  border: var(--input-border-style) var(--input-border-width);
  font-size: var(--input-font-size);
  padding-inline-start: calc(var(--input-invalid-border-hint-width) - var(--input-border-width)) !important;
}
.form-ctrl__input:focus-visible, .form-ctrl__input:focus-within, :host(.has-focus) .form-ctrl__input {
  outline: var(--nano-focus-ring-color) solid 3px;
  outline-offset: -2px;
}
:host(.is-invalid:not([disabled])) .form-ctrl__input {
  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);
  padding-inline-start: 0 !important;
}
:host(.is-invalid.has-focus:not([disabled])) .form-ctrl__input {
  border-color: var(--color-invalid);
  border-inline-start: solid var(--color-invalid) var(--input-invalid-border-hint-width);
  padding-inline-start: 0 !important;
}

.form-ctrl__input-wrap {
  display: flex;
  flex: 1;
  max-inline-size: 100%;
  align-items: center;
}
:host([type=textarea]) .form-ctrl__input-wrap {
  align-items: start;
}

.form-ctrl__clear-btn,
.form-ctrl__slot-end,
.form-ctrl__slot-start,
.form-ctrl__slot-value-end {
  margin-block: 0;
  margin-inline: 0;
  font-size: 1em;
  border: 0;
  outline: none;
  background-color: transparent;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  inline-size: auto;
  padding-inline-end: var(--padding-end);
  padding-block: var(--padding-top) var(--padding-bottom);
}
.form-ctrl__clear-btn:empty,
.form-ctrl__slot-end:empty,
.form-ctrl__slot-start:empty,
.form-ctrl__slot-value-end:empty {
  display: none;
}

.form-ctrl__slot-end {
  padding-block: calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);
}

.form-ctrl__slot-start {
  padding-inline-end: 0;
}
.has-float-label .form-ctrl__slot-start {
  display: none;
}

.form-ctrl__slot-start ::slotted(*),
.form-ctrl__slot-end ::slotted(*),
.form-ctrl__slot-value-end ::slotted(:not(slot-fb)) {
  padding-inline: unset;
  align-items: center;
  display: flex;
  block-size: 100%;
  z-index: 1;
}
:host([disabled]:not([disabled=false])) .form-ctrl__slot-start ::slotted(*),
:host([disabled]:not([disabled=false])) .form-ctrl__slot-end ::slotted(*),
:host([disabled]:not([disabled=false])) .form-ctrl__slot-value-end ::slotted(:not(slot-fb)) {
  pointer-events: none;
}

.form-ctrl__slot-start ::slotted(*) {
  margin-inline: var(--padding-start) 0;
}

.form-ctrl__slot-value-end::slotted(*),
.form-ctrl__slot-value-end ::slotted(*),
.form-ctrl__slot-value-end * {
  pointer-events: none;
}

.form-ctrl__clear-btn {
  color: var(--clear-btn-color);
  padding: 0;
  opacity: 0;
  inline-size: 0;
  appearance: none;
  align-items: center;
  overflow: hidden;
  padding-block: var(--padding-top) var(--padding-bottom);
}
:host(.is-invalid) .form-ctrl__clear-btn {
  color: var(--clear-btn-color--invalid);
}
:host(.has-value) .form-ctrl__clear-btn {
  padding-inline: 0 var(--padding-end);
  opacity: 1;
  inline-size: auto;
}
.form-ctrl__clear-btn:hover {
  color: var(--clear-btn-color--hover);
}

.form-ctrl__validation-icon {
  padding-block: var(--padding-top) var(--padding-bottom);
  padding-inline-end: var(--padding-end);
  display: grid;
  grid-template-areas: "overlay";
}
:host(:not(.is-invalid, .is-valid)) .form-ctrl__validation-icon {
  display: none;
}

.form-ctrl__error-icon,
.form-ctrl__success-icon {
  color: var(--color-valid);
  opacity: 0;
  transition: 0.3s ease-out opacity;
  grid-area: overlay;
}

:host(.is-valid) .form-ctrl__success-icon {
  opacity: 1;
}

.form-ctrl__error-icon {
  color: var(--color-invalid);
}
:host(.is-invalid) .form-ctrl__error-icon {
  opacity: 1;
}

:host {
  /**
    * @prop --placeholder-color: Color of placeholder. Defaults to var(--nano-color-neutral-1000).

    * @prop --padding-top: Used for most nested element's top vertical spacing. Defaults to var(--nano-spacing-sm).
    * @prop --padding-end: Used for most nested element's right horizontal spacing. Defaults to var(--nano-spacing-sm).
    * @prop --padding-bottom: Used for most nested element's bottom vertical spacing. Defaults to var(--nano-spacing-sm).
    * @prop --padding-start: Used for most nested element's left horizontal spacing. Defaults to var(--nano-spacing-sm).

    * @prop --color-invalid: Color of invalid messaging. Defaults to var(--nano-color-danger-1100).
    * @prop --color-valid: Color of valid messaging. Defaults to var(--nano-color-success-1000).

    * @prop --input-font-size: Font size of input. Defaults to var(--nano-font-size-sm).
    * @prop --input-text-color: Text color of input. Defaults to var(--nano-color-base-1000).
    * @prop --input-border-width: Border width of input. Defaults to 1px.
    * @prop --input-border-color: Border color of input. Defaults to var(--nano-color-neutral-300).
    * @prop --input-border-radius: Border radius of input. Defaults to 0px.
    * @prop --input-invalid-border-hint-width: Border-start width used as an invalid hint. Defaults to 2px.
    * @prop --input-border-style: Border style of input. Defaults to solid var(--input-border-color).
    * @prop --input-border-style--focus: Border style of input when focused. Defaults to solid var(--input-border-width) var(--nano-color-primary-700).
    * @prop --input-bg-color: Background color of input. Defaults to var(--nano-color-base-0).

    * @prop --invalid-msg-color: Color of invalid message. Defaults to var(--color-invalid).
    * @prop --help-msg-color: Color of help message. Defaults to var(--nano-color-base-1000).
    * @prop --more-font-size: Font size of helper & error messaging. Defaults to var(--nano-font-size-2xs).

    * @prop --clear-btn-color: Color of clear button. Defaults to rgb(var(--nano-color-base-rgb-1000) / 60%).
    * @prop --clear-btn-color--hover: Color of clear button on hover. Defaults to rgb(var(--nano-color-base-rgb-1000) / 100%).
    * @prop --clear-btn-color--invalid: Color of clear button when invalid. Defaults to rgb(var(--color-invalid) / 100%).

    * @prop --label-color: Color of label. Defaults to var(--nano-color-base-1000).
    * @prop --label-font-size: Font size of label. Defaults to var(--nano-font-size-xs).
    */
  --placeholder-color: var(--nano-color-neutral-1000);
  --padding-top: var(--nano-spacing-sm);
  --padding-end: var(--nano-spacing-sm);
  --padding-bottom: var(--nano-spacing-sm);
  --padding-start: var(--nano-spacing-sm);
  --color-invalid: var(--nano-color-danger-1100);
  --color-valid: var(--nano-color-success-1000);
  --input-font-size: var(--nano-font-size-sm);
  --input-text-color: var(--nano-color-base-1000);
  --input-border-width: 1px;
  --input-border-color: var(--nano-color-neutral-300);
  --input-border-radius: 0px;
  --input-invalid-border-hint-width: 2px;
  --input-border-style: solid var(--input-border-color);
  --input-border-style--focus: solid var(--input-border-width) var(--nano-color-primary-700);
  --input-bg-color: var(--nano-color-base-0);
  --invalid-msg-color: var(--color-invalid);
  --help-msg-color: var(--nano-color-base-1000);
  --more-font-size: var(--nano-font-size-2xs);
  --clear-btn-color: rgb(var(--nano-color-base-rgb-1000) / 60%);
  --clear-btn-color--hover: rgb(var(--nano-color-base-rgb-1000) / 100%);
  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);
  --label-color: var(--nano-color-base-1000);
  --label-font-size: var(--nano-font-size-xs);
  position: relative;
  inline-size: 100%;
  padding: 0 !important;
  color: currentcolor;
  display: block;
}

:host([type=date]) .input__date-trigger {
  color: var(--nano-color-primary-1200);
}
:host([type=date]) .input__date-dropdown {
  --overflow: visible;
}
:host([type=date]) .input__date-close {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  opacity: 0;
  z-index: 2;
}
:host([type=date]) .input__date-close:focus {
  opacity: 1;
}
@supports selector(::-moz-placeholder) {
  :host([type=date]) .form-ctrl__input-wrap {
    justify-content: end;
    min-block-size: 2.5em;
  }
  :host([type=date]) .input__native-ctrl {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
  }
  :host([type=date]) .input__date-dropdown {
    background-color: var(--nano-color-base-0);
  }
}

.input__native-ctrl {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  appearance: none;
  -webkit-rtl-ordering: logical;
  padding-block: 0;
  padding-inline: var(--padding-start) var(--padding-end);
  border-radius: var(--input-border-radius);
  text-overflow: ellipsis;
  color: var(--input-text-color);
  display: inline-block;
  flex: 1;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  border: 0;
  outline: none;
  background: transparent;
  margin: 0;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  line-height: 2.5em;
  min-block-size: 2.5em;
  /* stylelint-disable-next-line selector-no-vendor-prefix */
}
.has-float-label .input__native-ctrl {
  line-height: 2.1em;
  min-block-size: 2.1em;
  padding-block-start: 1.4em;
}
.input__native-ctrl::placeholder {
  color: var(--placeholder-color);
  font-family: inherit;
  font-style: initial;
  font-weight: initial;
  line-height: inherit;
  min-block-size: initial;
}
.input__native-ctrl::-moz-placeholder {
  line-height: 2.8em;
  text-overflow: ellipsis;
}
.input__native-ctrl:-webkit-autofill {
  background-color: transparent;
}
.input__native-ctrl::-webkit-search-decoration, .input__native-ctrl::-webkit-search-cancel-button, .input__native-ctrl::-webkit-search-results-button, .input__native-ctrl::-webkit-search-results-decoration {
  appearance: none;
}
.input__native-ctrl::-webkit-calendar-picker-indicator {
  display: none;
}
.input__native-ctrl::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.input__native-ctrl:invalid {
  box-shadow: none;
}
.input__native-ctrl::-ms-clear, .input__native-ctrl::-ms-reveal {
  display: none;
}
.input__native-ctrl.input__resizable {
  resize: vertical;
  overflow: auto;
}
.form-ctrl__textarea .input__native-ctrl {
  line-height: 1.5em;
  padding-block: calc(var(--padding-top) - 3px) 0.5em;
  white-space: pre-wrap;
}
.form-ctrl__textarea .input__native-ctrl::placeholder {
  line-height: 1.5em;
}
.has-float-label .form-ctrl__textarea .input__native-ctrl {
  padding-block-start: 1.75em;
}
:host([readonly]:not([readonly=false])) .input__native-ctrl {
  -webkit-user-select: none;
          user-select: none;
}