.lbaic-settings-dual-input {
  &-holder {
    --lbaic-settings-input-placeholder-right: unset;
    --lbaic-settings-input-placeholder-left: 0;
    --lbaic-settings-input-placeholder-transform: translate3d(0, 0, 0);

    width: 100%;

    &-in {
      --lbaic-settings-dual-input-pis: 42px;

      background-color: var(--lbaic-settings-input-local-bg, var(--lbaic-settings-input-bg));
      border: 1px solid var(--lbaic-settings-input-border);
      border-radius: 6px;

      &:focus-within {
        border: 1px solid var(--lbaic-settings-primary);
      }

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        display: flex;
      }
    }

    &-inner {
      position: relative;
      flex: var(--dual-input-flex, 1) 0 0;

      //calc(50% - 1.7%)
      &.flex {
        --dual-input-flex: 48.3%;
      }

      //calc(50% - 1.1%)
      &.flex-2 {
        --dual-input-flex: 48.9%;
      }

      //calc(50% - 4.3%)
      &.flex-3 {
        --dual-input-flex: 45.7%;
      }

      //calc(50% - 3.5%)
      &.flex-4 {
        --dual-input-flex: 46.5%;
      }

      &:last-child {

        .lbaic-settings-dual-input-content-editable {
          max-width: 100%;
        }

        &:after {
          content: '';
          position: absolute;
          background-color: rgba(var(--lbaic-settings-black-rgb), 0.2);

          @include min-width($lbaic-settings-wp-xl-breakpoint) {
            top: 17px;
            right: 0;
            left: 0;
            bottom: 17px;
            width: 1px;
          }

          @include max-width($lbaic-settings-wp-xl-breakpoint) {
            right: 0;
            top: 0;
            left: 0;
            height: 1px;
          }
        }
      }

      &.lbaic-settings-dual-input-has-value {
        .lbaic-settings-dual-input-placeholder {
          --lbaic-settings-input-placeholder-transform: translate3d(6px, -50%, 0) scale(0.857);
          --lbaic-settings-input-placeholder-padding-inline: 4px;
          --lbaic-settings-input-placeholder-lh: 10px;
        }
      }
    }
  }

  &-reverse {
    --lbaic-settings-input-placeholder-right: 0;
    --lbaic-settings-input-placeholder-left: unset;
    --lbaic-settings-input-align: right;
  }

  & {
    width: 100%;
    padding-block: 8px;
    padding-inline: var(--lbaic-settings-dual-input-pis, 10px) var(--lbaic-settings-dual-input-pie, 10px);
    font-size: var(--lbaic-settings-fs-13);
    font-weight: var(--lbaic-settings-fw-400);
    color: var(--lbaic-settings-input-color);
    line-height: var(--lbaic-settings-lh-24);
    text-align: var(--lbaic-settings-input-align, left);

    &:focus {
      box-shadow: none;
      outline: none;
    }

    &:focus, &:focus-within {
      & ~ .lbaic-settings-dual-input-placeholder {
        --lbaic-settings-input-placeholder-transform: translate3d(6px, -50%, 0) scale(0.857);
        --lbaic-settings-input-placeholder-padding-inline: 4px;
        --lbaic-settings-input-placeholder-lh: 10px;
      }
    }
  }

  &-placeholder {
    --lbaic-settings-input-placeholder-padding-inline: 7px;
    --lbaic-settings-input-placeholder-lh: var(--lbaic-settings-lh-24);
    transform-origin: left;

    position: absolute;
    top: 0;
    right: var(--lbaic-settings-input-placeholder-right);
    left: var(--lbaic-settings-input-placeholder-left);
    height: var(--lbaic-settings-input-placeholder-height, 42px);
    display: flex;
    align-items: center;
    transform: var(--lbaic-settings-input-placeholder-transform);
    transition: height 180ms ease-in-out, transform 180ms ease-in-out;
    pointer-events: none;
    z-index: 1;

    &-in {
      padding-inline: var(--lbaic-settings-input-placeholder-padding-inline);
      background-color: var(--lbaic-settings-input-local-bg, var(--lbaic-settings-input-bg));
      font-size: var(--lbaic-settings-fs-13);
      font-weight: var(--lbaic-settings-fw-400);
      color: var(--lbaic-settings-input-placeholder-color);
    }
  }

  &-error {
    --lbaic-settings-input-border: var(--lbaic-settings-input-error);
    --lbaic-settings-input-placeholder-color: var(--lbaic-settings-input-error);

    &-holder {
      &-in {
        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          width: 100%;
          display: flex;
          padding-block-start: 4px;
          &-item {
            width: 45.7%;
          }
        }
      }

      &-item {
        &-in {
          font-size: var(--lbaic-settings-fs-12);
          color: var(--lbaic-settings-input-placeholder-color);
          line-height: var(--lbaic-settings-lh-16);
        }

        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          width: 45.7%;
        }
      }
    }

    & ~ .lbaic-settings-cb-t-input-action {
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        top: 46px;
      }
    }
  }

  &-h-48 {
    height: 48px;
  }

  &-h-42 {
    height: 42px;
  }

  &-reset {
    width: 100%;
    height: 100%;

    &:focus {
      box-shadow: none;
      outline: none;
    }
  }

  &-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  &-has-children {
    --lbaic-settings-input-pis: 44px;
    --lbaic-settings-input-placeholder-transform: translate3d(35px, 0, 0);

    .lbaic-settings-dual-input-children {
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 7px;
      display: flex;
      align-items: center;
    }

    .lbaic-settings-dual-input-content-editable-children {
      bottom: inherit;
    }
  }

  &-has-value {
    --lbaic-settings-input-placeholder-transform: translate3d(0, -50%, 0) scale(0.857);
  }

  &-content-editable {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
  }

  &-checkbox {
    position: absolute;
    top: 14px;
  }
}