@use 'ej2-base/styles/common/mixin' as *;

.e-content-placeholder.e-textbox.e-placeholder-textbox {
  background-size: 300px 33px;
  min-height: $textbox-min-height;
}

.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
  padding-right: $input-focus-text-padding-right;
}

.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
  padding-left: $input-focus-text-padding-left;
}

div.e-input-group,
span.e-input-group {
  &.e-prepend-wrapper {
    & .e-prepend-template {
      padding: $textbox-prepend-padding;
      display: flex;
      align-items: center;

      & .e-icons {
        font-size: $textbox-icon-template-font-size;
        margin: $textbox-icon-template-margin;

        &:focus-visible {
          outline: none;
        }
      }

      & .e-input-separator {
        border: 1px solid $textbox-icon-template-separator-color;
        border-width: 0 2px 0 0;
        margin: 0 5px;
        padding: 7px 0;
      }
    }

    & input.e-control {
      height: auto;
    }

    @if ($skin-name != 'material' or $skin-name != 'material-dark') {
      & input.e-input,
      &.e-input-focus input.e-input,
      &.e-append-wrapper input.e-input {
        padding-left: 1px;
      }
    }

    &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-top {
      top: $textbox-prepend-float-label-top;
    }

    &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-bottom {
      top: $textbox-prepend-float-label-bottom;
    }

    &.e-outline {
      &.e-multi-line-input {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
        &.e-float-input.e-control-wrapper.e-input-focus .e-float-text {
          @if ($skin-name == 'fluent2') {
            top: $textbox-outline-prepend-multiline-label-top !important; /* stylelint-disable-line declaration-no-important */
          }
          @else {
            top: $textbox-outline-prepend-multiline-label-top;
          }
        }
      }
      
      & .e-prepend-template {
        padding: $textbox-outline-prepend-padding;
      }

      & input.e-input,
      & input.e-input:focus,
      &.e-input-focus input.e-input {
        padding: $textbox-outline-prepend-input-padding;
      }

      &.e-append-wrapper input.e-input,
      &.e-append-wrapper input.e-input:focus,
      &.e-append-wrapper.e-input-focus input.e-input {
        padding: $textbox-outline-prepend-append-input-padding;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-bottom {
        top: $textbox-outline-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-top {
        top: $textbox-outline-prepend-label-top;
      }
    }

    &.e-filled {
      @if ($skin-name == 'fluent2') {
        padding-left: 0;
        
        &.e-append-wrapper {
          padding: 0;
        }
      }

      & .e-prepend-template {
        padding: $textbox-filled-prepend-padding;
      }

      @if ($skin-name == 'tailwind3') {
        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: 7px 7px 5px 1px;
        }
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-bottom {
        top: $textbox-filled-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-top {
        top: $textbox-filled-prepend-label-top;
      }
    }

    &.e-multi-line-input {
      & .e-prepend-template {
        display: block;
        padding: $textbox-prepand-multiline-padding;

        & .e-input-separator {
          padding: 5px 0 2px;
        }
      }

      & textarea.e-input {
        height: auto;
      }

      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px;
        }
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrat-light') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px 0;
        }
      }

      @if ($skin-name == 'FluentUI') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 6px 1px;
        }
      }

      @if ($skin-name == 'fluent2') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 1px;
        }
      }

      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px 0;
        }
      }

      @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 1px;
        }
      }
      
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
      &.e-float-input.e-control-wrapper.e-input-focus .e-float-text {
        top: $textbox-prepand-multiline-label-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
      &.e-float-input.e-control-wrapper.e-rtl label.e-float-text.e-label-bottom {
        top: $textbox-multiline-prepand-multiline-label-bottom-top;
      }

      &.e-filled {
        & .e-prepend-template {
          padding: $textbox-prepand-multiline-filled-padding;
        }

        &.e-append-wrapper textarea.e-input,
        &.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-prepand-append-multiline-filled-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-prepand-multiline-filled-textarea-padding;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $textbox-prepand-multiline-filled-label-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $textbox-multiline-filled-prepand-multiline-label-bottom-top;
        }

        &.e-rtl .e-prepend-template {
          padding: $textbox-rtlt-prepend-multiline-filled-template-padding;
        }
      }

      &.e-outline {
        & .e-prepend-template {
          padding: $textbox-prepand-multiline-outline-padding;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $textbox-multiline-outline-prepand-multiline-label-bottom-top;
        }

        @if ($skin-name == 'tailwind3') {
          &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
            top: -20px !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
            top: 15px !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &.e-append-wrapper textarea.e-input,
        &.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-prepand-append-multiline-outline-textarea-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-prepand-multiline-outline-textarea-padding;
        }
      }
    }

    &.e-rtl {
      & .e-prepend-template {
        padding: $textbox-rtl-prepend-padding;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-label-bottom {
          top: 14px;
        }

        &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-label-top {
          top: 15px;
        }
      }

      @if ($skin-name != 'material' or $skin-name != 'material-dark') {
        & input.e-input,
        &.e-input-focus input.e-input,
        &.e-append-wrapper input.e-input {
          padding-right: 1px;
        }
      }

      &.e-outline {
        & .e-prepend-template {
          padding: $textbox-rtl-outline-prepend-padding;
        }

        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: $textbox-rtl-prepand-outline-input-padding;
        }

        &.e-append-wrapper input.e-input,
        &.e-append-wrapper input.e-input:focus,
        &.e-append-wrapper.e-input-focus input.e-input {
          padding: $textbox-rtl-prepand-append-input-padding;
        }
      }

      &.e-filled {
        @if ($skin-name == 'fluent2') {
          padding-right: 0;
        }

        & .e-prepend-template {
          padding: $textbox-rtl-filled-prepend-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-filled-textarea-padding;
        }
      }

      &.e-multi-line-input {
        & .e-prepend-template {
          padding: $textbox-rtl-multiline-prepand-template-padding;
        }

        @if ($skin-name == 'tailwind3') {
          & textarea.e-input {
            padding-right: 1px;
          }
        }

        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -8px;
          }
        }

        @if ($skin-name == 'FluentUI') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -10px;
          }
        }

        @if ($skin-name == 'fluent2') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: -30px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: 7px;
          }
        }

        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -5px;
          }
        }

        @if ($skin-name == 'bootstrap') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 4px 1px;
            padding-right: 0;
          }
        }

        @if ($skin-name == 'bootstrap4') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 4px 1px;
            padding-right: 0;
          }
          &.e-float-input.e-control-wrapper label.e-label-bottom {
            top: -7px;
          }
        }

        &.e-outline .e-prepend-template {
          padding: $textbox-rtl-multiline-outline-prepand-template-padding;
        }

        &.e-outline textarea.e-input,
        &.e-outline.e-input-focus textarea.e-input,
        &.e-outline textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-outline-textarea-padding;
        }

        &.e-outline.e-append-wrapper textarea.e-input,
        &.e-filled.e-append-wrapper textarea.e-input,
        &.e-outline.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-filled.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-outline.e-append-wrapper textarea.e-input:focus,
        &.e-filled.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-append-outline-textarea-padding;
        }
      }
    }
  }

  &.e-append-wrapper {
    & .e-append-template {
      padding: $textbox-append-padding;
      display: flex;
      align-items: center;

      & .e-icons {
        font-size: $textbox-icon-template-font-size;
        margin: $textbox-icon-template-margin;

        &:focus-visible {
          outline: none;
        }
      }

      & .e-input-separator {
        border: 1px solid $textbox-icon-template-separator-color;
        border-width: 0 2px 0 0;
        margin: 0 5px;
        padding: 7px 0;
      }
    }

    & input.e-control {
      height: auto;
    }

    &.e-outline {
      & .e-append-template {
        padding: $textbox-outline-append-padding;
      }

      & input.e-input,
      & input.e-input:focus,
      &.e-input-focus input.e-input {
        padding: $textbox-append-outline-input-padding;
      }
    }

    &.e-filled {
      @if ($skin-name == 'fluent2') {
        padding-right: 0;
      }

      & .e-append-template {
        padding: $textbox-filled-append-padding;
      }
    }

    &.e-multi-line-input {
      & .e-append-template {
        display: block;
        padding: $textbox-append-multiline-padding;

        & .e-input-separator {
          padding: 5px 0 2px;
        }
      }

      & textarea.e-input {
        height: auto;
      }

      &.e-filled {
        & .e-append-template {
          padding: $textbox-append-multiline-filled-template-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-append-multiline-filled-textarea-padding;
        }
      }

      &.e-outline {
        & .e-append-template {
          padding: $textbox-append-multiline-outline-template-padding;
        }
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-append-multiline-outline-textarea-padding;
        }
      }
    }

    &.e-rtl {
      & .e-append-template {
        padding: $textbox-rtl-append-template-padding;
      }

      @if ($skin-name == 'bootstrap4') {
        &.e-multi-line-input .e-append-template {
          padding: 11px 8px;
        }
      }

      &.e-outline {
        & .e-append-template {
          padding: $textbox-rtl-append-outline-template-padding;
        }

        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: $textbox-rtl-append-outline-input-padding;
        }
      }

      &.e-filled {
        @if ($skin-name == 'fluent2') {
          padding-left: 0;

          & input.e-input,
          & input.e-input:focus,
          &.e-input-focus input.e-input {
            padding: 14px 12px 5px;
          }
        }
	  
        & .e-append-template {
          padding: $textbox-rtl-append-filled-template-padding;
        }
      }

      &.e-multi-line-input.e-filled .e-append-template {
        padding: $textbox-rtl-multiline-append-filled-template-padding;
      }

      &.e-multi-line-input.e-filled textarea.e-input,
      &.e-multi-line-input.e-filled.e-input-focus textarea.e-input,
      &.e-multi-line-input.e-filled textarea.e-input:focus {
        padding: $textbox-rtl-multiline-append-filled-textarea-padding;
      }

      &.e-multi-line-input.e-outline textarea.e-input,
      &.e-multi-line-input.e-outline.e-input-focus textarea.e-input,
      &.e-multi-line-input.e-outline textarea.e-input:focus {
        padding: $textbox-rtl-multiline-append-outline-textarea-padding;
      }
    }
  }
}

@if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
  .e-float-input.e-input-group.e-prepend-wrapper.e-append-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-input-group.e-prepend-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper.e-append-wrapper:not(.e-filled) label.e-float-text.e-label-top,
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
}
@else {
  .e-float-input.e-input-group.e-prepend-wrapper.e-append-wrapper label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-input-group.e-prepend-wrapper label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper.e-append-wrapper label.e-float-text.e-label-top,
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper label.e-float-text.e-label-top {
    margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
}

@if ($skin-name == 'tailwind3') {
  .e-float-input.e-input-group.e-rtl.e-filled.e-prepend-wrapper.e-append-wrapper,
  .e-float-input.e-input-group.e-rtl.e-filled.e-prepend-wrapper,
  .e-float-input.e-input-group.e-rtl.e-filled.e-append-wrapper {
    padding: 0;
  }
}

.e-input-group.e-prepend-wrapper.e-input-focus input.e-input {
  padding-left: 1px;
}

.e-input-group.e-rtl.e-prepend-wrapper.e-input-focus input.e-input {
  padding-right: 1px;
}