.v2FormField {
  pointer-events: none;

  display: flex;
  gap: var(--gap--xs);
  align-items: flex-start;

  max-width: 100%;
  min-height: calc(var(--size--formField) + 2 * var(--borderWidth--line)); // the input's box
  margin: var(--margin--xs) 0;

  // force validated wrapper flex alignment opinion to the same as .v2formField
  &.js-validated-element-wrapper {
    align-items: flex-start;
  }

  .v2FormField__label {
    flex-shrink: 0;

    padding: var(--padding--xs) var(--padding--md) var(--padding--xs) 0;

    font-family: var(--fontFamily--label);
    font-size: var(--fontSize--label-small);
    font-weight: var(--fontWeight--label-small);
    line-height: var(--lineHeight--label-small);
    letter-spacing: var(--letterSpacing--label-small);
  }

  .v2FormField__label--justify {
    margin-right: auto;
  }

  .v2FormField__labelAfter {
    margin-top: var(--margin--xs);
    margin-bottom: var(--margin--xs);
    margin-left: var(--margin--xs);

    font-family: var(--fontFamily--label);
    font-size: var(--fontSize--label-small);
    font-weight: var(--fontWeight--label-small);
    line-height: var(--lineHeight--label-small);
    letter-spacing: var(--letterSpacing--label-small);
  }

  .v2FormField__label + .switch {
    margin-top: var(--margin--xxs);
  }

  .v2FormField__checkbox,
  .v2FormField__radio,
  .v2FormField__codeEditor,
  .v2FormField__wysiwyg,
  .v2FormField__file,
  .v2FormField__input,
  .v2FormField__select,
  .v2FormField__multiSelect,
  .v2FormField__singleSelect,
  .v2FormField__static {
    pointer-events: all;
    min-width: 0;
  }

  .v2formRow__label:not(:has(.v2FormField__labelText)),
  .v2FormField__labelText,
  .v2FormField__labelAfter,
  .show-tooltip,
  select,
  button,
  input {
    pointer-events: all;
  }

  .v2FormField__static {
    &:not(:has(.btn)) {
      margin-top: var(--margin--xs);
    }
    .btn {
      margin-top: 0;
    }
    .toggle-register & {
      margin-top: var(--margin--sm);
    }
  }

  .v2FormField__codeEditor,
  .v2FormField__wysiwyg {
    width: 100%;
  }

  .v2FormField__input > .btn {
    margin-top: 0; // hanles right top margin of our custom file upload .btn inside form field
  }

  .v2FormField__phone {
    display: flex;
    align-items: center;
  }

  .numberField {
    text-align: right;
  }

  input::-webkit-datetime-edit {
    // override for https://bugs.webkit.org/show_bug.cgi?id=139848
    display: block;
    margin-top: -1px;
    padding: 0;
  }

  input[type='file'].std-fileinput {
    position: absolute;
  }
  td & {
    display: inline-flex;
    margin: 0;
    vertical-align: top;
  }
  &.full {
    width: 100%;
    .v2FormField__input,
    .v2FormField__select,
    .v2FormField__multiSelect,
    .v2FormField__singleSelect {
      width: 100%;
    }
  }

  // current form field styles override
  .country-flags-inner {
    top: 0;
  }

  // checkboxes at mapLine (category trees)
  .tree & {
    margin: 0 0 0 20px;
  }

  // product whisperer like lg size
  ul.token-input-list li {
    display: block;
    width: 440px;
    max-width: 100%;
  }
  &.full ul.token-input-list li {
    width: 100%;
  }

  // unsupported span
  .unsupported {
    margin-top: var(--margin--xs);
  }
}

.v2FormField__error,
.v2FormField__warning,
.v2FormField__hint {
  display: block;

  max-width: 220px;
  padding: var(--padding--xs) 0 0 0;

  font-family: var(--fontFamily--caption);
  font-size: var(--fontSize--caption-small);
  font-weight: var(--fontWeight--caption-small);
  line-height: var(--lineHeight--caption-small);
  text-align: left;
  letter-spacing: var(--letterSpacing--caption-small);

  @media only screen and (min-width: 640px) {
    max-width: 1px; // this set tu minimum, because the text overflows anyways
    white-space: nowrap;
  }
}

.v2FormField.required .v2FormField__label,
.v2FormField__label--required {
  &::after {
    content: '*';
    padding-left: var(--padding--xxs);
    color: rgb(var(--foreground--critical-high-default--light));
  }
}

.v2FormField__error {
  color: rgb(var(--foreground--critical-high-default--light));
}

.v2FormField__warning {
  color: rgb(var(--foreground--warning-medium-default--light));
}

.v2FormField__hint {
  color: rgb(var(--foreground--neutral-medium-default--light));
}

.v2FormField__input,
.v2FormField__singleSelect {
  position: relative;

  .loader {
    position: absolute;
    top: calc((var(--size--formField) + 2 * var(--borderWidth--line) - var(--loader-size)) / 2);
    transform: translateX(calc(-1 * (var(--loader-size) + 4px)));
  }

  button:has(~ .loader),
  input:has(~ .loader:not(.hidden)) {
    padding-right: 24px;
  }
}

.v2FormField__select,
.v2FormField__multiSelect {
  position: relative;

  .loader {
    position: absolute;
    top: calc((var(--size--formField) + 2 * var(--borderWidth--line) - var(--loader-size)) / 2);
    transform: translateX(calc(-1 * (var(--loader-size) + 26px)));
  }

  button:has(~ .loader) {
    padding-right: 44px;
  }
}

.v2FormField__singleSelect--modePicker {
  .loader {
    transform: translateX(calc(-1 * (var(--loader-size) + 26px)));
  }
}

.v2MultipleBox {
  overflow: auto;

  max-width: 100%;
  max-height: 226px;
  margin: 0;
  padding: 0;

  list-style: none;

  border: 1px solid rgb(var(--border--neutral-low-default--light));
  &.xxs {
    width: 35px;
  }
  &.xs {
    width: 65px;
  }
  &.sm {
    width: 130px;
  }
  &.md {
    width: 220px;
  }
  &.lg {
    width: 440px;
  }
  li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    .v2FormField__checkbox {
      padding: 0;
    }
    > label {
      margin: 0;
      padding: var(--padding--xxs) var(--padding--xs);
      > span {
        margin-top: var(--margin--xs);
      }
    }
  }
}

.v2FormField__inputInner {
  position: relative;
  display: inline-block;
}

// Phone field
.v2FormField--phoneField {
  fieldset.v2FormField__input {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .v2FormField__input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap--sm);
    align-items: center;
    .phoneField {
      max-width: 124px;
    }
    &.fontPolyfill select {
      font-family: 'Twemoji Country Flags', var(--fontFamily--body);
    }

    .loader {
      position: unset;
      transform: translateX(-4px);
      margin-left: calc(-1 * (var(--loader-size) + var(--margin--sm)));
    }
  }

  .singleSelectField__inputTrigger.md,
  // styles for select due to Smarty phone field instance
  select {
    width: 44px;
  }

  .dialCode {
    width: 36px;
    text-align: right;
  }
}

.v2form {
  display: flex;
  flex-flow: column;

  &:not(:last-child) {
    margin-bottom: var(--margin--md);
  }

  .v2FormField__label {
    width: min(340px, 30vw);
    text-align: right;
    .std-modal & {
      width: min(140px, 20vw);
    }
  }

  .btn {
    margin: var(--margin--xs) 0 0 auto;
  }
  .v2formRow .btn {
    margin-left: 0;
  }

  // mapLine spaced like it has label
  & > .tree {
    // simulates width of label
    margin-left: min(340px, 30vw);
    // padded for margin + gap
    padding-left: calc(var(--padding--md) + var(--padding--xs));
    // simulates with of label in modal
    .std-modal & {
      margin-left: min(140px, 20vw);
    }
  }
  .tree dt {
    // override of not refactored negative space from left
    max-width: 100%;
  }
}

.v2formRow {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: var(--gap--xs);
  align-items: flex-start;

  margin: var(--margin--xs) 0;

  .v2formRow__label {
    margin: var(--margin--xs) 0;
  }

  .v2formRow,
  .v2FormField,
  .btn {
    margin: 0;
  }

  > *:nth-child(n + 2) .v2FormField__label {
    width: auto;
    padding-inline: var(--padding--xs);
  }

  // TODO: FIXME https://github.com/shoptet/cms4/issues/23416
  > a:not(.btn, .shoptet-icon),
  .open-modal:not(.with-icon),
  em:not([class]),
  span:not([class]) {
    margin: var(--margin--xs) 0;
  }

  // tooltip alignment
  .v2FormField > .show-tooltip.tooltip-icon {
    margin-top: 0;
  }
}

.v2formButtons {
  display: flex;
  gap: var(--gap--xs);
  justify-content: flex-end;
  .std-modal & {
    margin-right: 0;
    margin-left: auto;
  }
}

// legacy alignment for utilitary special cases (eg. Customer detail -> rating)
.text-center .v2FormField__checkbox,
.text-center .v2FormField__radio,
.text-center input {
  margin-inline: auto;
}

// special compact form for usecase in StockingItems (form next to image preview)
.v2form.v2form--compact {
  max-width: 87vw;
  .v2FormField__label {
    width: min(140px, 20vw);
  }
  .v2formRow {
    flex-wrap: nowrap;
    .v2FormField {
      overflow: hidden;
      flex-shrink: 1;
    }
  }
}