@use 'sass:math';
$primary: rgba(62,80,180,1);
$primary-font: #fff;
$accent: rgba(0,200,83,1);
$accent-font: #fff;

$primary-50: lighten($primary, 38%);
$primary-100: lighten($primary, 31%);
$primary-200: lighten($primary, 19%);
$primary-300: lighten($primary, 8%);
$primary-50-font: #000;
$primary-100-font: #000;
$primary-200-font: #000;
$primary-300-font: #fff;
$grey-white: #fff;
$grey-black: #000;
$grey-50: #fafafa;
$grey-100: #f5f5f5;
$grey-200: #eee;
$grey-300: #e0e0e0;
$grey-400: #bdbdbd;
$grey-500: #9e9e9e;
$grey-600: #757575;
$grey-700: #616161;
$grey-800: #424242;
$grey-900: #212121;
$grey-dark: #303030;
$grey-light-font: #000;
$grey-dark-font: #fff;
$base-font: #000;
$error-font: #f44336;
$shadow: #000;
$skin-name: 'material' !default;$accent: #e3165b !default;
$accent-font: #fff !default;

$primary: #3f51b5 !default;
$primary-50: #e8eaf6 !default;
$primary-100: #c5cae9 !default;
$primary-200: #9fa8da !default;
$primary-300: #7986cb !default;
$primary-font: #fff !default;
$primary-50-font: #000 !default;
$primary-100-font: #000 !default;
$primary-200-font: #000 !default;
$primary-300-font: #fff !default;
$grey-white: #fff !default;
$grey-black: #000 !default;
$grey-50: #fafafa !default;
$grey-100: #f5f5f5 !default;
$grey-200: #eee !default;
$grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default;
$grey-500: #9e9e9e !default;
$grey-600: #757575 !default;
$grey-700: #616161 !default;
$grey-800: #424242 !default;
$grey-900: #212121 !default;
$grey-dark: #303030 !default;
$grey-light-font: #000 !default;
$grey-dark-font: #fff !default;
$base-font: #000 !default;
$error-font: #f44336 !default;
$shadow: #000 !default;
$skin-name: 'material' !default;
$theme-name: 'material' !default;

//Message component

//Message Default
$msg-color: $grey-900 !default;
$msg-bg-color: $grey-200 !default;
$msg-border-color: $grey-200 !default;
$msg-color-alt1: $grey-900 !default;
$msg-bg-color-alt1: transparent !default;
$msg-border-color-alt1: $grey-400 !default;
$msg-color-alt2: $grey-white !default;
$msg-bg-color-alt2: $grey-900 !default;
$msg-border-color-alt2: $grey-900 !default;

$msg-icon-color: $grey-900 !default;
$msg-icon-color-alt1: $grey-900 !default;
$msg-icon-color-alt2: $grey-white !default;

$msg-close-icon-color: $grey-800 !default;
$msg-close-icon-color-alt1: $grey-800 !default;
$msg-close-icon-color-alt2: $grey-white !default;

//Message Danger
$msg-danger-color-alt1:#d74113 !default;
$msg-danger-bg-color-alt1: transparent !default;
$msg-danger-border-color-alt1: $msg-danger-color-alt1 !default;
$msg-danger-color: $grey-900 !default;
$msg-danger-bg-color: lighten($msg-danger-color-alt1, 50%) !default;
$msg-danger-border-color: lighten($msg-danger-color-alt1, 50%) !default;
$msg-danger-color-alt2: $grey-white !default;
$msg-danger-bg-color-alt2: darken($msg-danger-color-alt1, 20%) !default;
$msg-danger-border-color-alt2: darken($msg-danger-color-alt1, 20%) !default;

$msg-danger-icon-color: #d74113 !default;
$msg-danger-icon-color-alt1: #d74113 !default;
$msg-danger-icon-color-alt2: $grey-white !default;

$msg-danger-close-icon-color: $grey-800 !default;
$msg-danger-close-icon-color-alt1: $grey-800 !default;
$msg-danger-close-icon-color-alt2: $grey-white !default;

//Message success
$msg-success-color-alt1: #4d831e !default;
$msg-success-bg-color-alt1: transparent !default;
$msg-success-border-color-alt1: $msg-success-color-alt1 !default;
$msg-success-color: $grey-900 !default;
$msg-success-bg-color: lighten($msg-success-color-alt1, 50%) !default;
$msg-success-border-color: lighten($msg-success-color-alt1, 50%) !default;
$msg-success-color-alt2: $grey-white !default;
$msg-success-bg-color-alt2: darken($msg-success-color-alt1, 10%) !default;
$msg-success-border-color-alt2: darken($msg-success-color-alt1, 10%) !default;

$msg-success-icon-color: #4d831e !default;
$msg-success-icon-color-alt1: #4d831e !default;
$msg-success-icon-color-alt2: $grey-white !default;

$msg-success-close-icon-color: $grey-800 !default;
$msg-success-close-icon-color-alt1: $grey-800 !default;
$msg-success-close-icon-color-alt2: $grey-white !default;

//Message warning
$msg-warning-color-alt1: #c15601 !default;
$msg-warning-bg-color-alt1: transparent !default;
$msg-warning-border-color-alt1: $msg-warning-color-alt1 !default;
$msg-warning-color: $grey-900 !default;
$msg-warning-bg-color: lighten($msg-warning-color-alt1, 50%) !default;
$msg-warning-border-color: lighten($msg-warning-color-alt1, 50%) !default;
$msg-warning-color-alt2: $grey-white !default;
$msg-warning-bg-color-alt2: darken($msg-warning-color-alt1, 10%) !default;
$msg-warning-border-color-alt2: darken($msg-warning-color-alt1, 10%) !default;

$msg-warning-icon-color: #c15601 !default;
$msg-warning-icon-color-alt1: #c15601 !default;
$msg-warning-icon-color-alt2: $grey-white !default;

$msg-warning-close-icon-color: $grey-800 !default;
$msg-warning-close-icon-color-alt1: $grey-800 !default;
$msg-warning-close-icon-color-alt2: $grey-white !default;

//Message Info
$msg-info-color-alt1: #0677d5 !default;
$msg-info-bg-color-alt1: transparent !default;
$msg-info-border-color-alt1: $msg-info-color-alt1 !default;
$msg-info-color: $grey-900 !default;
$msg-info-bg-color: lighten($msg-info-color-alt1, 50%) !default;
$msg-info-border-color: lighten($msg-info-color-alt1, 50%) !default;
$msg-info-color-alt2: $grey-white !default;
$msg-info-bg-color-alt2: darken($msg-info-color-alt1, 15%) !default;
$msg-info-border-color-alt2: darken($msg-info-color-alt1, 15%) !default;

$msg-info-icon-color: #0677d5 !default;
$msg-info-icon-color-alt1: #0677d5 !default;
$msg-info-icon-color-alt2: $grey-white !default;

$msg-info-close-icon-color: $grey-800 !default;
$msg-info-close-icon-color-alt1: $grey-800 !default;
$msg-info-close-icon-color-alt2: $grey-white !default;

//App bar
//Light
$appbar-bg-color-alt1: $grey-white !default;
$appbar-color-alt1: $grey-black !default;
$appbar-border-color-alt1: $grey-white !default;
$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;

//Dark
$appbar-bg-color-alt2: $grey-900 !default;
$appbar-color-alt2: $grey-white !default;
$appbar-border-color-alt2: $grey-900 !default;
$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;

//shadow
$appbar-bottom-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .16) !default;
$appbar-top-shadow: 0 -2px 3px rgba(0, 0, 0, .1), 0 -2px 6px rgba(0, 0, 0, .2) !default;



@if not variable-exists('is-roboto-loaded') {
  //sass-lint:disable no-url-protocols,no-url-domains
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');// stylelint-disable-line no-invalid-position-at-import-rule
}

$is-roboto-loaded: 'true' !default;

$font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont' !default;
$font-size: 12px !default;
$font-weight: normal !default;
$font-path: 'common-images' !default;
$header-bg-color: $grey-white !default;
$header-gradient-color: none !default;
$header-border-color: $grey-black !default;
$header-font-color: $grey-light-font !default;
$header-icon-color: $grey-light-font !default;
$content-bg-color: $grey-white !default;
$content-border-color: $grey-black !default;
$content-font-color: $grey-light-font !default;
$default-bg-color: $grey-white !default;
$default-gradient-color: none !default;
$default-border-color: $grey-black !default;
$default-font-color: $grey-light-font !default;
$default-icon-color: $grey-light-font !default;
$hover-bg-color: $grey-200 !default;
$hover-gradient-color: none !default;
$hover-border-color: $grey-black !default;
$hover-font-color: $grey-light-font !default;
$hover-icon-color: $grey-light-font !default;
$active-bg-color: $grey-100 !default;
$active-gradient-color: none !default;
$active-border-color: $grey-black !default;
$active-font-color: $grey-light-font !default;
$active-icon-color: $grey-light-font !default;
$error-font-color: $error-font !default;
$warning-font-color: #ffca1c !default;
$success-font-color: #22b24b !default;
$information-font-color: #489bd5 !default;
$overlay-bg-color: #383838 !default;
$shadow-color: rgba(0, 0, 0, .4) !default;
$border-size: 1px !default;
$border-type: solid !default;
$border-radius: 0 !default;
$border-left-radius: 0 !default;
$border-right-radius: 0 !default;
$border-top-radius: 0 !default;
$border-bottom-radius: 0 !default;

$css: '' !default;
$imported-modules: () !default;

@mixin export-module($module) {
  @if (index($imported-modules, $module) == null) {
    $imported-modules: append($imported-modules, $module) !global;
    @content;
  }
}


@include export-module('base-core') {

  /*! common core */
  .e-control,
  .e-css  {
    font-family: $font-family;
    font-size: $font-size;
    font-weight: $font-weight;
  }

  $white: #fff;
  $background: #e82824;

  $warning: #ffd800;
  $yellow: #ffff00;
  .e-error {
    @if $skin-name == 'Material3' {
      color: rgba($error-font-color);
    }
    @else {
      color: $error-font-color;
    }
    font-family: $font-family;
    font-size: $font-size;
    font-weight: $font-weight;
  }

  .e-control,
  .e-control [class ^= 'e-'],
  .e-control [class *= ' e-'] {
    box-sizing: border-box;
  }

  .e-control:focus,
  .e-control *:focus {
    outline: none;
  }

  .e-rtl {
    direction: rtl;
    text-align: right;
  }

  .e-overlay {
    background-color: $overlay-bg-color;
    filter: alpha(opacity=50);
    height: 100%;
    opacity: .5;
    pointer-events: none;
    touch-action: none;
    width: 100%;
  }

  .e-hidden {
    display: none;
  }

  .e-blazor-hidden {
    visibility: hidden;
  }

  .e-disabled {
    background-image: none;
    cursor: default;
    filter: alpha(Opacity=35);
    opacity: .35;
  }

  .e-ul {
    list-style-type: none;
  }

  .e-prevent-select {
    user-select: none;
  }

  .e-warning {
    @if $skin-name == 'Material3' {
      color: rgba($warning-font-color);
    }
    @else {
      color: $warning-font-color;
    }
  }

  .e-success {
    @if $skin-name == 'Material3' {
      color: rgba($success-font-color);
    }
    @else {
      color: $success-font-color;
    }
  }

  .e-information {
    @if $skin-name == 'Material3' {
      color: rgba($information-font-color);
    }
    @else {
      color: $information-font-color;
    }
  }

  .e-block-touch {
    touch-action: pinch-zoom;
  }
  .e-license {
    color: $yellow;
    text-decoration: none;
  }
  .e-license-banner {
    position: absolute;
    right: 10px;
    top: 27%;
    cursor: pointer;
  }
}


@include export-module('base-animation') {

  /*! animation keyframes */
  @keyframes SlideLeftOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(-100%, 0);
    }
  }

  @keyframes SlideLeftIn {
    from {
      transform: translate(-100%, 0);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideRightIn {
    from {
      transform: translate(100%, 0);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideRightOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(100%, 0);
    }
  }

  @keyframes SlideBottomIn {
    from {
      transform: translate(0, 100%);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideBottomOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(0, 100%);
    }
  }

  @keyframes SlideTopIn {
    from {
      transform: translate(0, -100%);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideTopOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(0, -100%);
    }
  }

  @keyframes SlideRight {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  @keyframes SlideLeft {
    from {
      width: 100%;
    }

    to {
      width: 0;
    }
  }

  @keyframes SlideDown {
    from {
      height: 0;
    }

    to {
      height: 100%;
    }
  }

  @keyframes SlideUp {
    from {
      height: 100%;
    }

    to {
      height: 0;
    }
  }

  @keyframes FadeIn {
    0% {
      filter: alpha(opacity=0);
      opacity: 0;
    }

    100% {
      filter: alpha(opacity=100);
      opacity: 1;
    }
  }

  @keyframes FadeOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
    }
  }

  @keyframes ZoomIn {
    from {
      transform: translate(0, 0) scale(0);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }

  @keyframes ZoomOut {
    from {
      transform: translate(0, 0) scale(1);
    }

    to {
      transform: translate(0, 0) scale(0);
    }
  }

  @keyframes FadeZoomIn {
    from {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: scale(0);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes FadeZoomOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: scale(1);
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: scale(0);
    }
  }

  @keyframes FlipRightDownIn {
    from {
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightDownOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(-180deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightUpIn {
    from {
      transform: perspective(400px) rotateY(135deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightUpOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftDownIn {
    from {
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftDownOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftUpIn {
    from {
      transform: perspective(400px) rotateY(-135deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftUpOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg) perspective(200px);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYLeftIn {
    from {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: perspective(400px) rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(90deg);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYLeftOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(90deg);
    }

    75% {
      transform: perspective(850px) rotateY(125deg);
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYRightIn {
    from {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(-90deg);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYRightOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(-90deg);
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateY(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXDownIn {
    from {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: perspective(400px) rotateX(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(90deg);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXDownOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: perspective(400px) rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(90deg);
    }

    75% {
      transform: perspective(850px) rotateX(125deg);
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateX(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXUpIn {
    from {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: perspective(400px) rotateX(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(-90deg);
    }

    to {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXUpOut {
    from {
      filter: alpha(opacity=100);
      opacity: 1;
      transform: perspective(400px) rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(-90deg);
    }

    to {
      filter: alpha(opacity=0);
      opacity: 0;
      transform: rotateX(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  #{&} .e-ripple,
  #{&} .e-ripple-style {
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  $ripple-background: rgba(0, 0, 0, .1);
  $ripple-background-m3: linear-gradient(90deg, rgba(28, 27, 31, .08) 0%, rgba(28, 27, 31, .1) 5%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 95%, rgba(28, 27, 31, .08) 100%);

  #{&} .e-ripple-element,
  #{&} .e-ripple-style::after {
    @if $skin-name =='Material3' {
      background: $ripple-background-m3;
    }

    @else {
      background-color: $ripple-background;
    }
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transform: scale(0);

    @if $skin-name =='Material3' {
      transition: opacity .3s transform 50ms cubic-bezier(.2, 0, 0, 1);
    }

    @else {
      transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
    }
  }

  #{&} .e-ripple-style {
    $ripple-style-background: rgba(0, 0, 0, .3);
    $ripple-style-background-m3: rgba(28, 27, 31, .12);

    &::after {
      @if $skin-name =='Material3' {
        background: $ripple-style-background-m3;
      }

      @else {
        background: $ripple-style-background;
      }
      content: '';
      display: block;
      height: 50%;
      left: 25%;
      opacity: 0;
      top: 25%;
      transform: scale(3);
      @if $skin-name =='Material3' {
        transition: transform .3s, opacity .3s;
      }
      @else {
        transition: transform .5s, opacity .5s;
      }
      width: 50%;
    }

    &:active::after {
      opacity: 1;
      transform: scale(0);
      transition: 0s;
    }
  }
}


@include export-module('base-icons') {
@at-root {
  @font-face {
    font-family: "e-icons";
    font-style: normal;
    font-weight: normal;
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64, ) format('truetype');
  }
}

#{&} .e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;

  &.e-small {
    font-size: 8px;
  }

  &.e-medium {
    font-size: 16px;
  }

  &.e-large {
    font-size: 24px;
  }

  &.e-export-pdf:before { content: "\e240"; }
  &.e-export-csv:before { content: "\e241"; }
  &.e-export-excel:before { content: "\e242"; }
  &.e-date-range:before { content: "\e245"; }
  &.e-filter-clear:before { content: "\e248"; }
  &.e-filter:before { content: "\e251"; }
  &.e-bullet-6:before { content: "\e253"; }
  &.e-bullet-1:before { content: "\e254"; }
  &.e-none:before { content: "\e256"; }
  &.e-bullet-5:before { content: "\e259"; }
  &.e-border-diagonal-2:before { content: "\e262"; }
  &.e-border-diagonal-1:before { content: "\e265"; }
  &.e-bullet-4:before { content: "\e267"; }
  &.e-bullet-2:before { content: "\e270"; }
  &.e-bullet-3:before { content: "\e271"; }
  &.e-chevron-right-double:before { content: "\e300"; }
  &.e-chevron-left-double:before { content: "\e302"; }
  &.e-chevron-down-double:before { content: "\e304"; }
  &.e-chevron-up-double:before { content: "\e306"; }
  &.e-repeat:before { content: "\e308"; }
  &.e-recurrence-edit:before { content: "\e30a"; }
  &.e-location:before { content: "\e30c"; }
  &.e-description:before { content: "\e30d"; }
  &.e-time-zone:before { content: "\e30e"; }
  &.e-calendar:before { content: "\e322"; }
  &.e-timeline-agenda:before { content: "\e313"; }
  &.e-work-week:before { content: "\e314"; }
  &.e-week:before { content: "\e315"; }
  &.e-day:before { content: "\e31b"; }
  &.e-agenda-date-range:before { content: "\e31d"; }
  &.e-date-time:before { content: "\e421"; }
  &.e-people:before { content: "\e424"; }
  &.e-timeline-day:before { content: "\ea85"; }
  &.e-timeline-week:before { content: "\ea88"; }
  &.e-timeline-work-week:before { content: "\ea8b"; }
  &.e-timeline-month:before { content: "\ea8e"; }
  &.e-table:before { content: "\e705"; }
  &.e-copy:before { content: "\e70a"; }
  &.e-th-small:before { content: "\e714"; }
  &.e-save-2:before { content: "\e735"; }
  &.e-paragraph-2:before { content: "\e75e"; }
  &.e-edit-6:before { content: "\e7a3"; }
  &.e-close-large-1:before { content: "\e7a7"; }
  &.e-export-word:before { content: "\e7b0"; }
  &.e-circle-close:before { content: "\e7e9"; }
  &.e-filter-2:before { content: "\e7ee"; }
  &.e-plus-small:before { content: "\e7f9"; }
  &.e-close:before { content: "\e7fc"; }
  &.e-check:before { content: "\e7ff"; }
  &.e-print-2:before { content: "\e813"; }
  &.e-edit-2:before { content: "\e81e"; }
  &.e-plus:before { content: "\e823"; }
  &.e-close-large-2:before { content: "\e825"; }
  &.e-chevron-down-thin:before { content: "\e36a"; }
  &.e-chevron-up-fill-2:before { content: "\e82a"; }
  &.e-chevron-down-fill:before { content: "\e82e"; }
  &.e-chevron-up-fill:before { content: "\e834"; }
  &.e-chevron-down-fill-2:before { content: "\e83d"; }
  &.e-arrow-down:before { content: "\e83f"; }
  &.e-arrow-up:before { content: "\e840"; }
  &.e-chevron-right-fill-3:before { content: "\e848"; }
  &.e-chevron-left-fill-2:before { content: "\e84b"; }
  &.e-delete-1:before { content: "\e84e"; }
  &.e-chevron-left-fill:before { content: "\e854"; }
  &.e-chevron-right-fill:before { content: "\e859"; }
  &.e-arrow-left:before { content: "\e85b"; }
  &.e-arrow-right:before { content: "\e85f"; }
  &.e-sorting-1:before { content: "\e890"; }
  &.e-edit:before { content: "\e891"; }
  &.e-first-page:before { content: "\e896"; }
  &.e-last-page:before { content: "\e897"; }
  &.e-timeline-today:before { content: "\e901"; }
  &.e-chevron-left:before { content: "\e904"; }
  &.e-filter-1:before { content: "\e909"; }
  &.e-chevron-up:before { content: "\e910"; }
  &.e-chevron-right:before { content: "\e913"; }
  &.e-chevron-down:before { content: "\e916"; }
  &.e-circle-close-2:before { content: "\e917"; }
  &.e-chevron-up-fill-3:before { content: "\e918"; }
  &.e-chevron-down-fill-3:before { content: "\e919"; }
  &.e-filter-cancel:before { content: "\e920"; }
  &.e-chevron-left-2:before { content: "\e921"; }
  &.e-group-icon:before { content: "\e926"; }
  &.e-selection:before { content: "\e930"; }
  &.e-close-2:before { content: "\e932"; }
  &.e-check-2:before { content: "\e933"; }
  &.e-intermediate-state:before { content: "\e934"; }
  &.e-chevron-left-3:before { content: "\e937"; }
  &.e-edit-3:before { content: "\e944"; }
  &.e-close-3:before { content: "\e945"; }
  &.e-chevron-right-2:before { content: "\e956"; }
  &.e-plus-2:before { content: "\e963"; }
  &.e-chevron-down-fill-5:before { content: "\e969"; }
  &.e-circle-remove:before { content: "\e974"; }
  &.e-arrow-left-2:before { content: "\e977"; }
  &.e-more-vertical-1:before { content: "\e984"; }
  &.e-search:before { content: "\e993"; }
  &.e-month:before { content: "\e93c"; }
  &.e-trash:before { content: "\e94a"; }
  &.e-chevron-down-2:before { content: "\e94d"; }
  &.e-save:before { content: "\e98e"; }
  &.e-menu:before { content: "\e99a"; }
  &.e-refresh:before { content: "\e99d"; }
  &.e-circle-close-fill-3:before { content: "\e208"; }
  &.e-clock:before { content: "\e20c"; }
  &.e-freeze-column:before { content: "\e21e"; }
  &.e-error-treeview:before { content: "\e22a"; }
  &.e-circle-remove-2:before { content: "\e22b"; }
  &.e-circle-add:before { content: "\e22c"; }
  &.e-drag-and-drop-indicator:before { content: "\e22d"; }
  &.e-chevron-right-3:before { content: "\e22f"; }
  &.e-chevron-right-4:before { content: "\e430"; }
  &.e-play:before { content: "\e324"; }
  &.e-pause:before { content: "\e326"; }
  &.e-para-option-down:before { content: "\e274"; }
  &.e-search-2:before { content: "\e275"; }
  &.e-border-center:before { content: "\e276"; }
  &.e-restart-at-1:before { content: "\e277"; }
  &.e-hyperlink-open:before { content: "\e278"; }
  &.e-cut-2:before { content: "\e279"; }
  &.e-copy-2:before { content: "\e280"; }
  &.e-border-top:before { content: "\e281"; }
  &.e-delete-column:before { content: "\e282"; }
  &.e-delete-row:before { content: "\e283"; }
  &.e-insert-right:before { content: "\e284"; }
  &.e-insert-left:before { content: "\e285"; }
  &.e-hyperlink-remove:before { content: "\e286"; }
  &.e-border-middle:before { content: "\e287"; }
  &.e-border-right:before { content: "\e288"; }
  &.e-hyperlink-edit:before { content: "\e289"; }
  &.e-link-2:before { content: "\e290"; }
  &.e-border-left:before { content: "\e291"; }
  &.e-table-delete:before { content: "\e292"; }
  &.e-table-properties:before { content: "\e294"; }
  &.e-hyperlink-copy:before { content: "\e295"; }
  &.e-border-bottom:before { content: "\e298"; }
  &.e-paste-2:before { content: "\e501"; }
  &.e-continue-numbering:before { content: "\e503"; }
  &.e-insert-below:before { content: "\e505"; }
  &.e-insert-above:before { content: "\e506"; }
  &.e-table-cell-none:before { content: "\e507"; }
  &.e-box:before { content: "\e509"; }
  &.e-all:before { content: "\e511"; }
  &.e-table-align-right:before { content: "\e515"; }
  &.e-table-border-custom:before { content: "\e516"; }
  &.e-table-align-left:before { content: "\e517"; }
  &.e-table-align-center:before { content: "\e518"; }
  &.e-line-very-small:before { content: "\e520"; }
  &.e-line-normal:before { content: "\e521"; }
  &.e-line-small:before { content: "\e522"; }
  &.e-para-option-up:before { content: "\e523"; }
  &.e-vertical-align-bottom:before { content: "\e525"; }
  &.e-vertical-align-center:before { content: "\e526"; }
  &.e-vertical-align-top:before { content: "\e527"; }
  &.e-clear-format:before { content: "\e331"; }
  &.e-strikethrough:before { content: "\e332"; }
  &.e-upper-case:before { content: "\e333"; }
  &.e-justify:before { content: "\e334"; }
  &.e-image:before { content: "\e335"; }
  &.e-resize:before { content: "\e336"; }
  &.e-exit-full-screen:before { content: "\e337"; }
  &.e-edit-4:before { content: "\e338"; }
  &.e-bold:before { content: "\e339"; }
  &.e-align-left:before { content: "\e33a"; }
  &.e-cut:before { content: "\e33b"; }
  &.e-text-alternative:before { content: "\e33c"; }
  &.e-copy-1:before { content: "\e33d"; }
  &.e-delete-2:before { content: "\e33e"; }
  &.e-increase-indent:before { content: "\e33f"; }
  &.e-erase:before { content: "\e340"; }
  &.e-undo:before { content: "\e341"; }
  &.e-full-screen:before { content: "\e342"; }
  &.e-underline:before { content: "\e343"; }
  &.e-list-unordered:before { content: "\e344"; }
  &.e-eye:before { content: "\e345"; }
  &.e-list-ordered:before { content: "\e346"; }
  &.e-lower-case:before { content: "\e347"; }
  &.e-link-remove:before { content: "\e348"; }
  &.e-zoom-in:before { content: "\e349"; }
  &.e-open-link:before { content: "\e34a"; }
  &.e-print:before { content: "\e34b"; }
  &.e-font-color:before { content: "\e34c"; }
  &.e-align-right:before { content: "\e34d"; }
  &.e-link:before { content: "\e34e"; }
  &.e-view-side:before { content: "\e34f"; }
  &.e-code-view:before { content: "\e350"; }
  &.e-zoom-out:before { content: "\e351"; }
  &.e-superscript:before { content: "\e352"; }
  &.e-paragraph:before { content: "\e353"; }
  &.e-redo:before { content: "\e354"; }
  &.e-paste:before { content: "\e355"; }
  &.e-insert-code:before { content: "\e356"; }
  &.e-subscript:before { content: "\e357"; }
  &.e-display:before { content: "\e358"; }
  &.e-replace:before { content: "\e359"; }
  &.e-italic:before { content: "\e35a"; }
  &.e-caption:before { content: "\e35b"; }
  &.e-paint-bucket:before { content: "\e35c"; }
  &.e-decrease-indent:before { content: "\e35d"; }
  &.e-align-center:before { content: "\e35e"; }
  &.e-font-name:before { content: "\e35f"; }
  &.e-drag-and-drop-2:before { content: "\e330"; }
  &.e-field-settings:before { content: "\e434"; }
  &.e-two-column:before { content: "\ea74"; }
  &.e-two-row:before { content: "\ea75"; }
  &.e-sum:before { content: "\ea76"; }
  &.e-filter-3:before { content: "\ea77"; }
  &.e-close-large:before { content: "\ea7f"; }
  &.e-filter-clear-2:before { content: "\ea82"; }
  &.e-circle-check:before { content: "\ea84"; }
  &.e-align-bottom:before { content: "\ea91"; }
  &.e-insert-above-2:before { content: "\ea92"; }
  &.e-insert-below-2:before { content: "\ea93"; }
  &.e-align-middle:before { content: "\ea94"; }
  &.e-delete-column-2:before { content: "\ea95"; }
  &.e-delete-row-2:before { content: "\ea96"; }
  &.e-insert-left-2:before { content: "\ea97"; }
  &.e-align-top:before { content: "\ea98"; }
  &.e-insert-right-2:before { content: "\ea99"; }
  &.e-edit-5:before { content: "\ea9a"; }
  &.e-align-middle-2:before { content: "\ea9b"; }
  &.e-freeze-column-2:before { content: "\ea9e"; }
  &.e-style:before { content: "\ea9f"; }
  &.e-delete-3:before { content: "\eb00"; }
  &.e-freeze-row:before { content: "\eb02"; }
  &.e-text-header:before { content: "\eb03"; }
  &.e-more-horizontal-1:before { content: "\eb04"; }
  &.e-resizer:before { content: "\eb05"; }
  &.e-folder:before { content: "\ec04"; }
  &.e-first-page-2:before { content: "\ec05"; }
  &.e-previous:before { content: "\ec06"; }
  &.e-next:before { content: "\ec07"; }
  &.e-last-page-2:before { content: "\ec08"; }
  &.e-zoom-out-2:before { content: "\ec09"; }
  &.e-zoom-in-2:before { content: "\ec0a"; }
  &.e-download:before { content: "\ec0b"; }
  &.e-bookmark:before { content: "\ec0c"; }
  &.e-search-3:before { content: "\ec0d"; }
  &.e-text-annotation:before { content: "\ec0e"; }
  &.e-close-4:before { content: "\ec0f"; }
  &.e-comments:before { content: "\ec10"; }
  &.e-save-3:before { content: "\ec11"; }
  &.e-align-left-2:before { content: "\ec12"; }
  &.e-style-2:before { content: "\ec13"; }
  &.e-undo-2:before { content: "\ec14"; }
  &.e-highlight-color:before { content: "\ec15"; }
  &.e-more-vertical-3:before { content: "\ec16"; }
  &.e-underline-2:before { content: "\ec17"; }
  &.e-strikethrough-2:before { content: "\ec18"; }
  &.e-paint-bucket-2:before { content: "\ec19"; }
  &.e-pan:before { content: "\ec1a"; }
  &.e-opacity:before { content: "\ec1b"; }
  &.e-delete-4:before { content: "\ec1c"; }
  &.e-mouse-pointer:before { content: "\ec1d"; }
  &.e-chevron-right-small:before { content: "\ec1e"; }
  &.e-stroke-color:before { content: "\ec1f"; }
  &.e-print-3:before { content: "\ec20"; }
  &.e-redo-2:before { content: "\ec21"; }
  &.e-font-color-2:before { content: "\ec22"; }
  &.e-shapes:before { content: "\ec23"; }
  &.e-chevron-left-small:before { content: "\ec24"; }
  &.e-stroke-width:before { content: "\ec25"; }
  &.e-annotation-edit:before { content: "\ec26"; }
  &.e-thumbnail:before { content: "\ec27"; }
  &.e-stamp:before { content: "\ec28"; }
  &.e-break-page:before { content: "\ec29"; }
  &.e-file:before { content: "\ec2a"; }
  &.e-collapse-2:before { content: "\e554"; }
  &.e-expand:before { content: "\e556"; }
  &.e-double-resize-2:before { content: "\e557"; }
  &.e-double-resize-1:before { content: "\e558"; }
  &.e-single-resize-1:before { content: "\e559"; }
  &.e-single-resize-2:before { content: "\e56a"; }
  &.e-single-resize-3:before { content: "\e56b"; }
  &.e-single-resize-4:before { content: "\e56c"; }
  &.e-drag-and-drop:before { content: "\e903"; }
  &.e-chevron-up-fill-4:before { content: "\e56d"; }
  &.e-chevron-down-fill-4:before { content: "\e56e"; }
  &.e-chevron-right-fill-2:before { content: "\e56f"; }
  &.e-chevron-left-fill-3:before { content: "\e570"; }
  &.e-more-vertical-4:before { content: "\e571"; }
  &.e-filter-active:before { content: "\ebb3"; }
  &.e-code-view-2:before { content: "\e907"; }
  &.e-grid-view:before { content: "\e600"; }
  &.e-paste-3:before { content: "\e601"; }
  &.e-trash-2:before { content: "\e602"; }
  &.e-download-2:before { content: "\e603"; }
  &.e-cut-3:before { content: "\e604"; }
  &.e-list-unordered-2:before { content: "\e605"; }
  &.e-refresh-2:before { content: "\e606"; }
  &.e-circle-info:before { content: "\e607"; }
  &.e-chevron-right-thin:before { content: "\e608"; }
  &.e-folder-2:before { content: "\e609"; }
  &.e-close-5:before { content: "\e60a"; }
  &.e-folder-fill:before { content: "\e60b"; }
  &.e-rename:before { content: "\e60c"; }
  &.e-copy-3:before { content: "\e60d"; }
  &.e-search-4:before { content: "\e60e"; }
  &.e-upload-1:before { content: "\e60f"; }
  &.e-back:before { content: "\e610"; }
  &.e-select-all:before { content: "\e611"; }
  &.e-sorting-2:before { content: "\e612"; }
  &.e-more-vertical-5:before { content: "\e613"; }
  &.e-check-3:before { content: "\e614"; }
  &.e-more-horizontal-3:before { content: "\e615"; }
  &.e-export-excel-2:before { content: "\e700"; }
  &.e-export-csv-2:before { content: "\e701"; }
  &.e-save-4:before { content: "\e703"; }
  &.e-save-as:before { content: "\e704"; }
  &.e-export:before { content: "\e711"; }
  &.e-delete-5:before { content: "\e706"; }
  &.e-grand-total:before { content: "\e707"; }
  &.e-table-2:before { content: "\e708"; }
  &.e-sub-total:before { content: "\e709"; }
  &.e-file-new:before { content: "\e712"; }
  &.e-number-formatting:before { content: "\e70b"; }
  &.e-rename-2:before { content: "\e70c"; }
  &.e-export-pdf-2:before { content: "\e70d"; }
  &.e-full-screen-2:before { content: "\e70e"; }
  &.e-chart:before { content: "\e70f"; }
  &.e-upload-2:before { content: "\e710"; }
  &.e-font-type:before { content: "\e273"; }
  &.e-close-6:before { content: "\eb36"; }
  &.e-line-spacing:before { content: "\eb37"; }
  &.e-lock:before { content: "\eb3a"; }
  &.e-border-outer:before { content: "\eb66"; }
  &.e-link-3:before { content: "\eb3c"; }
  &.e-align-bottom-2:before { content: "\eb3d"; }
  &.e-border-all-2:before { content: "\eb3e"; }
  &.e-table-of-content:before { content: "\eb41"; }
  &.e-page-numbering:before { content: "\eb43"; }
  &.e-bold-2:before { content: "\eb47"; }
  &.e-align-top-2:before { content: "\eb49"; }
  &.e-align-middle-3:before { content: "\eb4a"; }
  &.e-page-setup:before { content: "\eb4c"; }
  &.e-stroke-style:before { content: "\eb4d"; }
  &.e-image-2:before { content: "\eb4f"; }
  &.e-bookmark-fill:before { content: "\eb51"; }
  &.e-header:before { content: "\eb53"; }
  &.e-list-unordered-3:before { content: "\eb5b"; }
  &.e-show-hide-panel:before { content: "\eb5d"; }
  &.e-align-right-2:before { content: "\eb5f"; }
  &.e-footer:before { content: "\eb60"; }
  &.e-border-all:before { content: "\eb95"; }
  &.e-border-inner:before { content: "\eb88"; }
  &.e-cell:before { content: "\eb93"; }
  &.e-align-top-3:before { content: "\eb35"; }
  &.e-align-bottom-3:before { content: "\eb0e"; }
  &.e-align-middle-4:before { content: "\eb0d"; }
  &.e-check-4:before { content: "\e935"; }
  &.e-break:before { content: "\eba6"; }
  &.e-break-page-2:before { content: "\eba0"; }
  &.e-break-section:before { content: "\eba2"; }
  &.e-auto-fit-content:before { content: "\eba8"; }
  &.e-fixed-column-width:before { content: "\eba9"; }
  &.e-auto-fit-window:before { content: "\ebaa"; }
  &.e-bring-forward:before { content: "\e5a1"; }
  &.e-bring-to-front:before { content: "\e5a2"; }
  &.e-send-to-back:before { content: "\e5a3"; }
  &.e-send-backward:before { content: "\e5a4"; }
  &.e-ungroup-1:before { content: "\e5a6"; }
  &.e-group-1:before { content: "\e5a7"; }
  &.e-order:before { content: "\e4a4"; }
  &.e-chevron-up-small-2:before { content: "\e651"; }
  &.e-chevron-down-small-2:before { content: "\e652"; }
  &.e-chevron-right-small-2:before { content: "\e653"; }
  &.e-chevron-left-small-2:before { content: "\e654"; }
  &.e-chevron-right-double-2:before { content: "\e655"; }
  &.e-chevron-left-double-2:before { content: "\e656"; }
  &.e-zoom-to-fit:before { content: "\e657"; }
  &.e-add-above:before { content: "\e658"; }
  &.e-add-below:before { content: "\e659"; }
  &.e-line:before { content: "\e668"; }
  &.e-arrow-right-up:before { content: "\e669"; }
  &.e-rectangle:before { content: "\e670"; }
  &.e-circle:before { content: "\e671"; }
  &.e-pentagan:before { content: "\e672"; }
  &.e-length:before { content: "\e673"; }
  &.e-perimeter:before { content: "\e674"; }
  &.e-area:before { content: "\e675"; }
  &.e-radius:before { content: "\e676"; }
  &.e-volume:before { content: "\e677"; }
  &.e-change-scale-ratio:before { content: "\e678"; }
  &.e-settings:before { content: "\e679"; }
  &.e-comment-2:before { content: "\e680"; }
  &.e-thumbs-down-1:before { content: "\e681"; }
  &.e-thumbs-up:before { content: "\e682"; }
  &.e-thumbs-down-2:before { content: "\e683"; }
  &.e-export-jpg:before { content: "\e713"; }
  &.e-export-png:before { content: "\e715"; }
  &.e-export-svg:before { content: "\e716"; }
  &.e-conditional-formatting:before { content: "\e725"; }
  &.e-hide-formula-bar:before { content: "\e717"; }
  &.e-hide-headings:before { content: "\e718"; }
  &.e-hide-gridlines:before { content: "\e719"; }
  &.e-eye-slash:before { content: "\e721"; }
  &.e-export-xls:before { content: "\e726"; }
  &.e-export-csv-3:before { content: "\e727"; }
  &.e-mdx:before { content: "\e724"; }
  &.e-rename-3:before { content: "\e728"; }
  &.e-folder-open:before { content: "\e65f"; }
  &.e-named-set:before { content: "\e65d"; }
  &.e-grip-vertical:before { content: "\e65c"; }
  &.e-dimension:before { content: "\e65b"; }
  &.e-level-1:before { content: "\e65a"; }
  &.e-level-2:before { content: "\e662"; }
  &.e-level-3:before { content: "\e65e"; }
  &.e-level-4:before { content: "\e660"; }
  &.e-level-5:before { content: "\e661"; }
  &.e-user-defined:before { content: "\e663"; }
  &.e-kpi:before { content: "\e664"; }
  &.e-sort-down:before { content: "\e665"; }
  &.e-sorting-3:before { content: "\e666"; }
  &.e-sort-up:before { content: "\e667"; }
  &.e-calculated-member:before { content: "\e729"; }
  &.e-custom-sort:before { content: "\e732"; }
  &.e-sort-descending:before { content: "\e733"; }
  &.e-sort-ascending:before { content: "\e734"; }
  &.e-comment-add:before { content: "\e814"; }
  &.e-reply:before { content: "\e815"; }
  &.e-send-1:before { content: "\e816"; }
  &.e-comment-show:before { content: "\e817"; }
  &.e-signature:before { content: "\e737"; }
  &.e-filter-main:before { content: "\e736"; }
  &.e-text-wrap:before { content: "\e824"; }
  &.e-unfiltered:before { content: "\e73a"; }
  &.e-filtered-sort-descending:before { content: "\e73b"; }
  &.e-sort-descending-2:before { content: "\e73c"; }
  &.e-sort-ascending-2:before { content: "\e73d"; }
  &.e-filtered-sort-ascending:before { content: "\e73e"; }
  &.e-filtered:before { content: "\e73f"; }
  &.e-filter-clear-3:before { content: "\e738"; }
  &.e-reapply:before { content: "\e74a"; }
  &.e-group-2:before { content: "\e74b"; }
  &.e-ungroup-2:before { content: "\e74c"; }
  &.e-paste-text-only:before { content: "\e685"; }
  &.e-paste-style:before { content: "\e686"; }
  &.e-paste-special:before { content: "\e687"; }
  &.e-paste-match-destination:before { content: "\e688"; }
  &.e-spell-check:before { content: "\e689"; }
  &.e-comment-reopen:before { content: "\e818"; }
  &.e-web-layout:before { content: "\e193"; }
  &.e-print-layout:before { content: "\e194"; }
  &.e-border-none:before { content: "\e195"; }
  &.e-data-validation:before { content: "\e196"; }
  &.e-protect-sheet:before { content: "\e197"; }
  &.e-text-form:before { content: "\e198"; }
  &.e-properties-2:before { content: "\e199"; }
  &.e-clear-form:before { content: "\e19a"; }
  &.e-drop-down:before { content: "\e19b"; }
  &.e-form-field:before { content: "\e19c"; }
  &.e-check-box:before { content: "\e192"; }
  &.e-table-update:before { content: "\e19e"; }
  &.e-changes-accept:before { content: "\e19f"; }
  &.e-display-for-review:before { content: "\e203"; }
  &.e-changes-reject:before { content: "\e204"; }
  &.e-changes-previous:before { content: "\e205"; }
  &.e-show-markup:before { content: "\e206"; }
  &.e-changes-next:before { content: "\e209"; }
  &.e-changes-track:before { content: "\e20a"; }
  &.e-conditional-formatting-large:before { content: "\e401"; }
  &.e-highlight:before { content: "\e402"; }
  &.e-top-bottom-rules:before { content: "\e403"; }
  &.e-data-bars:before { content: "\e404"; }
  &.e-color-scales:before { content: "\e405"; }
  &.e-iconsets:before { content: "\e406"; }
  &.e-clear-rules:before { content: "\e407"; }
  &.e-new-rules:before { content: "\e408"; }
  &.e-greater-than:before { content: "\e409"; }
  &.e-less-than:before { content: "\e410"; }
  &.e-between:before { content: "\e411"; }
  &.e-equalto:before { content: "\e412"; }
  &.e-text-that-contains:before { content: "\e413"; }
  &.e-date-occurring:before { content: "\e414"; }
  &.e-top-10:before { content: "\e415"; }
  &.e-bottom-10-items:before { content: "\e416"; }
  &.e-bottom-10:before { content: "\e417"; }
  &.e-above-average:before { content: "\e418"; }
  &.e-below-average:before { content: "\e419"; }
  &.e-duplicate-cell:before { content: "\e420"; }
  &.e-footnote:before { content: "\e435"; }
  &.e-end-footnote:before { content: "\e436"; }
  &.e-chart-insert-column:before { content: "\e440"; }
  &.e-chart-data-table:before { content: "\e441"; }
  &.e-chart-legend:before { content: "\e442"; }
  &.e-chart-insert-x-y-scatter:before { content: "\e443"; }
  &.e-chart-insert-waterfall:before { content: "\e444"; }
  &.e-chart-updown-bars:before { content: "\e445"; }
  &.e-add-chart-element:before { content: "\e446"; }
  &.e-chart-gridlines:before { content: "\e447"; }
  &.e-insert-hierarchy-charts:before { content: "\e448"; }
  &.e-chart-insert-line:before { content: "\e449"; }
  &.e-chart-switch-row-column:before { content: "\e450"; }
  &.e-chart-error-bars:before { content: "\e451"; }
  &.e-chart-trendline:before { content: "\e452"; }
  &.e-chart-axes:before { content: "\e453"; }
  &.e-chart-select-data:before { content: "\e454"; }
  &.e-chart-lines:before { content: "\e455"; }
  &.e-chart-axis-titles:before { content: "\e456"; }
  &.e-chart-title:before { content: "\e457"; }
  &.e-chart-insert-pie:before { content: "\e458"; }
  &.e-change-chart-type:before { content: "\e459"; }
  &.e-insert-statistic-chart:before { content: "\e460"; }
  &.e-chart-data-labels:before { content: "\e461"; }
  &.e-chart-insert-combo:before { content: "\e462"; }
  &.e-chart-axis-titles-primary-horizontal:before { content: "\e486"; }
  &.e-chart-linear-forecast:before { content: "\e487"; }
  &.e-chart-legend-none:before { content: "\e488"; }
  &.e-chart-legend-right:before { content: "\e489"; }
  &.e-chart-data-callout:before { content: "\e490"; }
  &.e-chart-primary-minor-vertical:before { content: "\e491"; }
  &.e-chart-axes-primary-vertical:before { content: "\e492"; }
  &.e-chart-data-labels-center:before { content: "\e493"; }
  &.e-chart-data-table-none:before { content: "\e115"; }
  &.e-chart-data-labels-none:before { content: "\e495"; }
  &.e-chart-primary-major-vertical:before { content: "\e496"; }
  &.e-chart-legend-linear:before { content: "\e497"; }
  &.e-chart-error-bars-percentage:before { content: "\e498"; }
  &.e-chart-no-legend-keys:before { content: "\e499"; }
  &.e-chart-title-above-chart:before { content: "\e121"; }
  &.e-chart-trendline-none:before { content: "\e122"; }
  &.e-chart-with-legend-keys:before { content: "\e123"; }
  &.e-chart-axes-primary-horizontal:before { content: "\e124"; }
  &.e-chart-error-bars-standard-deviation:before { content: "\e125"; }
  &.e-chart-legend-top:before { content: "\e126"; }
  &.e-chart-primary-minor-horizontal:before { content: "\e145"; }
  &.e-chart-error-bars-none:before { content: "\e127"; }
  &.e-chart-up-down-bars-2:before { content: "\e128"; }
  &.e-chart-drop-lines:before { content: "\e129"; }
  &.e-chart-lines-none:before { content: "\e130"; }
  &.e-chart-primary-major-horizontal:before { content: "\e131"; }
  &.e-chart-legend-bottom:before { content: "\e132"; }
  &.e-chart-up-down-none:before { content: "\e111"; }
  &.e-chart-data-labels-outside-end:before { content: "\e905"; }
  &.e-chart-axis-titles-primary-vertical:before { content: "\e143"; }
  &.e-chart-legend-left:before { content: "\e892"; }
  &.e-chart-data-labels-inside-base:before { content: "\e893"; }
  &.e-chart-high-low-lines:before { content: "\e894"; }
  &.e-chart-trendline-exponential:before { content: "\e133"; }
  &.e-chart-trendline-moving-average:before { content: "\e134"; }
  &.e-chart-data-labels-inside-end:before { content: "\e135"; }
  &.e-chart-title-none:before { content: "\e136"; }
  &.e-chart-title-centered-overlay:before { content: "\e895"; }
  &.e-chart-error-bars-standard-error:before { content: "\e911"; }
  &.e-chart-3d-area-1:before { content: "\e144"; }
  &.e-chart-2d-stacked-bar:before { content: "\e889"; }
  &.e-chart-3d-surface-1:before { content: "\e827"; }
  &.e-chart-histogram-pareto:before { content: "\e114"; }
  &.e-chart-stock-volumn-open-high-low-close:before { content: "\e137"; }
  &.e-chart-stock-high-low-close:before { content: "\e138"; }
  &.e-chart-stock-open-high-low-close:before { content: "\e831"; }
  &.e-chart-2d-line-100-stacked-line-with-markers:before { content: "\e832"; }
  &.e-chart-filled-radar:before { content: "\e833"; }
  &.e-chart-3d-clustered-column:before { content: "\e142"; }
  &.e-chart-sunburst:before { content: "\e835"; }
  &.e-chart-treemap:before { content: "\e836"; }
  &.e-chart-3d-100-percent-stacked-area:before { content: "\e139"; }
  &.e-chart-3d-pie:before { content: "\e838"; }
  &.e-chart-3d-column-4:before { content: "\e839"; }
  &.e-more-column-charts:before { content: "\e899"; }
  &.e-chart-2d-stacked-line:before { content: "\e841"; }
  &.e-chart-donut:before { content: "\e112"; }
  &.e-chart-3d-clustered-bar:before { content: "\e843"; }
  &.e-chart-funnel:before { content: "\e140"; }
  &.e-chart-2d-pie-2:before { content: "\e141"; }
  &.e-chart-3d-line:before { content: "\e846"; }
  &.e-chart-2d-clustered-column:before { content: "\e847"; }
  &.e-chart-2d-100-percent-stacked-area:before { content: "\e900"; }
  &.e-more-line-charts:before { content: "\e849"; }
  &.e-chart-3d-100-percent-stacked-bar:before { content: "\e850"; }
  &.e-more-stock-charts:before { content: "\e851"; }
  &.e-chart-stock-volumn-high-low-close:before { content: "\e852"; }
  &.e-chart-bar-of-pie:before { content: "\e113"; }
  &.e-chart-clustered-column-line-on-secondary-axis:before { content: "\e912"; }
  &.e-chart-2d-clustered-bar:before { content: "\e855"; }
  &.e-chart-radar:before { content: "\e856"; }
  &.e-chart-3d-100-percent-stacked-column:before { content: "\e857"; }
  &.e-chart-stackedlines-with-markers:before { content: "\e858"; }
  &.e-chart-wireframe-3d-surface:before { content: "\e902"; }
  &.e-chart-2d-line-with-markers:before { content: "\e860"; }
  &.e-chart-box-and-whisker:before { content: "\e861"; }
  &.e-create-custom-combo-chart:before { content: "\e862"; }
  &.e-chart-2d-100-percent-stacked-bar:before { content: "\e863"; }
  &.e-chart-scatter-with-straight-lines:before { content: "\e864"; }
  &.e-more-statistical-charts:before { content: "\e865"; }
  &.e-chart-3d-stacked-area:before { content: "\e866"; }
  &.e-chart-2d-line:before { content: "\e867"; }
  &.e-chart-2d-100-percent-stacked-column:before { content: "\e868"; }
  &.e-more-pie-charts:before { content: "\e869"; }
  &.e-chart-bubble-1:before { content: "\e870"; }
  &.e-chart-2d-100-percent-stacked-line:before { content: "\e871"; }
  &.e-chart-histogram:before { content: "\e872"; }
  &.e-more-hierarchy-charts:before { content: "\e873"; }
  &.e-chart-combo-clustered-column-line:before { content: "\e874"; }
  &.e-chart-2d-stacked-area:before { content: "\e875"; }
  &.e-chart-3d-stacked-column:before { content: "\e876"; }
  &.e-chart-insert-bar:before { content: "\e877"; }
  &.e-chart-scatter-with-smooth-lines:before { content: "\e878"; }
  &.e-chart-surface-wireframe-contour:before { content: "\e879"; }
  &.e-chart-3d-stacked-bar:before { content: "\e880"; }
  &.e-chart-2d-pie-of-pie:before { content: "\e881"; }
  &.e-chart-3d-surface-2:before { content: "\e882"; }
  &.e-chart-2d-area:before { content: "\e883"; }
  &.e-chart-combo-stacked-area-clustered-column:before { content: "\e884"; }
  &.e-chart-waterfall:before { content: "\e885"; }
  &.e-chart-surface-contour:before { content: "\e886"; }
  &.e-more-scatter-charts:before { content: "\e887"; }
  &.e-chart-2d-stacked-column:before { content: "\e888"; }
  &.e-protect-workbook:before { content: "\e88a"; }
  &.e-change-case:before { content: "\e88c"; }
  &.e-export-pdf-3:before { content: "\e88b"; }
  &.e-freeze-pane:before { content: "\e88d"; }
  &.e-freeze-first-column:before { content: "\e88e"; }
  &.e-freeze-top-row:before { content: "\e88f"; }
  &.e-merge-cells:before { content: "\e89a"; }
  &.e-split-vertical:before { content: "\e89b"; }
  &.e-table-cell:before { content: "\e89c"; }
  &.e-split-horizontal:before { content: "\e89d"; }
  &.e-list-box:before { content: "\e89e"; }
  &.e-text-form-2:before { content: "\e89f"; }
  &.e-label:before { content: "\e90a"; }
  &.e-check-box-2:before { content: "\e90b"; }
  &.e-add-edit-form-field:before { content: "\e90c"; }
  &.e-button:before { content: "\e90d"; }
  &.e-drop-down-2:before { content: "\e90e"; }
  &.e-radio-button:before { content: "\e90f"; }
  &.e-password:before { content: "\e91a"; }
  &.e-table-insert-column:before { content: "\e91b"; }
  &.e-table-insert-row:before { content: "\e91c"; }
  &.e-table-overwrite-cells:before { content: "\e91d"; }
  &.e-table-nested:before { content: "\e91e"; }
  &.e-table-merge:before { content: "\e91f"; }
  &.e-drag-fill:before { content: "\e92a"; }
  &.e-home:before { content: "\e92b"; }
  &.e-gantt-gripper:before { content: "\e92c"; }
  &.e-bring-to-view:before { content: "\e92d"; }
  &.e-bring-to-center:before { content: "\e92e"; }
  &.e-warning:before { content: "\e92f"; }
  &.e-critical-path:before { content: "\e93a"; }
  &.e-border-shadow-2:before { content: "\e93b"; }
  &.e-border-diagonal-up:before { content: "\e947"; }
  &.e-border-diagonal-down:before { content: "\e93d"; }
  &.e-border-custom:before { content: "\e946"; }
  &.e-border-none-1:before { content: "\e93f"; }
  &.e-border-box:before { content: "\e940"; }
  &.e-border-shadow-1:before { content: "\e942"; }
  &.e-audio:before { content: "\e949"; }
  &.e-video:before { content: "\e94b"; }
  &.e-crop:before { content: "\e94c"; }
  &.e-star-filled:before { content: "\e94f"; }
  &.e-filters:before { content: "\e950"; }
  &.e-adjustment:before { content: "\e951"; }
  &.e-page-size:before { content: "\e952"; }
  &.e-reset:before { content: "\e953"; }
  &.e-triangle:before { content: "\e954"; }
  &.e-page-columns:before { content: "\e955"; }
  &.e-tint:before { content: "\e957"; }
  &.e-brightness:before { content: "\e958"; }
  &.e-contrast:before { content: "\e959"; }
  &.e-saturation:before { content: "\e95a"; }
  &.e-fade:before { content: "\e95b"; }
  &.e-flip-vertical:before { content: "\e95c"; }
  &.e-flip-horizontal:before { content: "\e95d"; }
  &.e-transform-left:before { content: "\e95f"; }
  &.e-transform-right:before { content: "\e960"; }
  &.e-sharpness:before { content: "\e961"; }
  &.e-grain:before { content: "\e962"; }
  &.e-frame-custom:before { content: "\e964"; }
  &.e-frame-1:before { content: "\e965"; }
  &.e-frame-2:before { content: "\e966"; }
  &.e-frame-3:before { content: "\e967"; }
  &.e-frame-4:before { content: "\e968"; }
  &.e-frame-5:before { content: "\e96a"; }
  &.e-frame-6:before { content: "\e96b"; }
  &.e-transform:before { content: "\e96c"; }
  &.e-check-tick:before { content: "\e96d"; }
  &.e-even-page-break:before { content: "\e96e"; }
  &.e-odd-page-break:before { content: "\e96f"; }
  &.e-page-column:before { content: "\e970"; }
  &.e-continuous-page-break:before { content: "\e971"; }
  &.e-page-text-wrap:before { content: "\e972"; }
  &.e-page-column-right:before { content: "\e973"; }
  &.e-page-column-left:before { content: "\e975"; }
  &.e-page-column-one:before { content: "\e976"; }
  &.e-page-column-two:before { content: "\e978"; }
  &.e-page-column-three:before { content: "\e979"; }
  &.e-multiple-comment:before { content: "\e97a"; }
  &.e-format-painter:before { content: "\e97b"; }
  &.e-launcher:before { content: "\e97c"; }
  &.e-character-style:before { content: "\e97d"; }
  &.e-linked-style:before { content: "\e97e"; }
  &.e-chart-2d-stacked-line-marked:before { content: "\e97f"; }
  &.e-chart-2d-100-percent-stacked-line-marked:before { content: "\e980"; }
  &.e-chart-2d-line-marked:before { content: "\e981"; }
  &.e-list-unordered-rtl:before { content: "\e982"; }
  &.e-list-ordered-rtl:before { content: "\e983"; }
  &.e-increase-indent-rtl:before { content: "\e985"; }
  &.e-decrease-indent-rtl:before { content: "\e986"; }
  &.e-emoji:before { content: "\e987"; }
  &.e-travel-and-places:before { content: "\e988"; }
  &.e-nature:before { content: "\e989"; }
  &.e-food-and-drinks:before { content: "\e98a"; }
  &.e-animals:before { content: "\e98b"; }
  &.e-objects:before { content: "\e98c"; }
  &.e-activities:before { content: "\e98d"; }
  &.e-hand-gestures:before { content: "\e98f"; }
  &.e-symbols:before { content: "\e990"; }
  &.e-flags:before { content: "\e991"; }
  &.e-unlock:before { content: "\e992"; }
  &.e-more-chevron:before { content: "\e994"; }
  &.e-border-frame:before { content: "\e995"; }
  &.e-frame-none:before { content: "\e996"; }
  &.e-frame-mat:before { content: "\e997"; }
  &.e-frame-bevel:before { content: "\e998"; }
  &.e-frame-line:before { content: "\e999"; }
  &.e-frame-hook:before { content: "\e99b"; }
  &.e-frame-inset:before { content: "\e99c"; }
}

}$ddl-input-font-size: 14px !default;
$ddl-zero-value: 0 !default;
$ddl-default-border-color: $grey-300 !default;
$ddl-input-border: $border-size $border-type !default;
$ddl-input-font-family: inherit !default;
$ddl-input-margin-bottom: 4px !default;
$ddl-input-padding: 8px $ddl-zero-value 4px !default;
$ddl-input-group-border-width: $ddl-zero-value !default;
$ddl-active-font-color: $accent !default;
$ddl-list-search-icon-padding: 12px 8px 8px !default;
$ddl-list-filter-text-indent: 8px 16px 8px !default;
$ddl-bigger-list-font-size: 14px !default;
$ddl-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
$ddl-filter-box-shadow-color: rgba(0, 0, 0, .3) !default;
$ddl-popup-background-color: $grey-white !default;
$ddl-filter-border: 0 !default;
$ddl-filter-top-border: 0 !default;
$ddl-filter-padding: 0 !default;
$ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
$ddl-filter-background-color: $grey-100 !default;
$ddl-clear-icon-margin-right: 66px !default;
$ddl-back-icon-margin: 0 10px 0 -52px !default;
$ddl-back-icon-padding: 0 8px !default;
$ddl-popup-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
$ddl-filter-margin: 0 !default;

// Small Size
$ddl-small-list-font-size: 12px !default;

// touch small
$ddl-bigger-small-list-font-size: 13px !default;

@include export-module('dropdownlist-material') {
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
    transform: rotate(0deg);
    transition: transform 300ms ease;
  }

  .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
    transform: rotate(180deg);
    transition: transform 300ms ease;
  }

  .e-dropdownbase .e-list-item.e-active.e-hover {
    color: $ddl-active-font-color;
  }

  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:active,
  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:hover,
  .e-input-group:not(.e-disabled) .e-back-icon:active,
  .e-input-group:not(.e-disabled) .e-back-icon:hover,
  #{&}.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
  #{&}.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
    background: transparent;
  }

  .e-input-group .e-ddl-icon:not(:active)::after {
    animation: none;
  }

  .e-ddl#{&}.e-popup {
    border: 0;
    box-shadow: $ddl-popup-shadow;
    margin-top: 2px;
  }

  #{&}.e-popup.e-ddl .e-dropdownbase {
    min-height: 26px;
  }

  .e-bigger #{&}.e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: $ddl-default-border-color;
  }

  .e-bigger #{&}.e-popup.e-ddl-device-filter {
    margin-top: 0;
  }

  .e-bigger .e-ddl-device .e-input-group,
  .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    background: $grey-100;
    border-width: 0;
    box-shadow: none;
    margin-bottom: 0;
  }

  .e-bigger .e-ddl-device .e-input-group .e-back-icon,
  .e-bigger .e-ddl-device .e-input-group input.e-input,
  .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
    background-color: $grey-100;
  }

  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
    margin: 6px 6px 5px;
    min-height: 12px;
    min-width: 12px;
    padding: 6px;
  }

  .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
  .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
    min-height: 16px;
    min-width: 16px;
  }

  .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
  .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
    padding: 8px 16px 8px 0;
  }

  .e-input-group.e-ddl,
  .e-input-group.e-ddl .e-input,
  .e-input-group.e-ddl .e-ddl-icon {
    background: transparent;
  }

  .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
    border-bottom-width: 0;
  }

  // small size
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
    margin: 0;
  }

  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
    padding: 5px 5px 5px 12px;
  }

  // Touch Small
  .e-bigger.e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
  .e-bigger.e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
  .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
  .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
    min-height: 18px;
    min-width: 18px;
  }

  .e-bigger.e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
  .e-bigger.e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
  .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
  .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
  .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
  .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
  #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
    padding: 8px 16px;
  }

  // outline class style for filter input
  .e-ddl.e-popup.e-outline .e-filter-parent {
    padding: 4px 8px;
  }
}

@include export-module('dropdownlist-layout') {
  .e-bigger .e-input-group.e-ddl {
    #{if(&, '&', '*')} .e-input-filter,
    #{if(&, '&', '*')} .e-input-filter:focus {
      margin-left: -20px;
    }
  }

  .e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name == 'Material3') {
        margin-top: 4px;
      }
    }
  }

  .e-bigger .e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-list-font-size;
      }
    }

    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name != 'bootstrap5' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'Material3') {
        padding: 4px 0;
      }
      @if ($skin-name == 'Material3') {
        margin-top: 8px;
      }
    }
  }

  .e-bigger.e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-list-font-size;
      }
    }

    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name != 'bootstrap5' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark') {
        padding: 4px 0;
      }
    }
  }

  .e-popup-full-page {
    bottom: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    right: 0;
    top: 0;

    #{&}.e-ddl.e-popup.e-ddl-device-filter {
      margin: $ddl-filter-margin;
    }
  }

  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
    position: relative;
  }

  .e-ddl.e-control-wrapper .e-ddl-disable-icon::before {
    content: '';
  }

  .e-ddl-device-filter .e-filter-parent {
    background-color: $ddl-filter-background-color;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
    display: none;
    pointer-events: none;
    position: absolute;
    right: 0;
    visibility: hidden;
  }
  /* stylelint-enable property-no-vendor-prefix */

  .e-filter-parent {
    border: $ddl-filter-border;
    border-top-width: $ddl-filter-top-border;
    box-shadow: $ddl-filter-box-shadow;
    display: block;
    padding: $ddl-filter-padding;
    @if ($skin-name == 'FluentUI') {
      border-bottom: $ddl-filter-parent-border;
    }
  }

  .e-ddl.e-input-group:not(.e-disabled) {
    cursor: pointer;
  }

  .e-ddl#{&}.e-popup.e-ddl-device-filter {
    @at-root {
      #{if(&, '&', '*')} .e-input-group.e-input-focus::before,
      #{if(&, '&', '*')} .e-input-group.e-input-focus::after {
        width: 0;
      }
    }
  }

  .e-ddl#{&}.e-popup {
    background: $ddl-popup-background-color;
    @if $skin-name != 'material' and $skin-name != 'Material3' {
      border: 1px solid $ddl-default-border-color;
    }
    @if $skin-name == 'Material3' {
      border-radius: 4px;
    }
    position: absolute;
    @at-root {
      #{if(&, '&', '*')} .e-search-icon {
        margin: 0;
        opacity: .57;
        padding: $ddl-list-search-icon-padding;
      }

      #{if(&, '&', '*')} .e-filter-parent .e-back-icon {
        padding: $ddl-back-icon-padding;
      }

      #{if(&, '&', '*')}.e-rtl .e-filter-parent .e-input-group.e-control-wrapper .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-filter:focus,
      #{if(&, '&', '*')} .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-group.e-control-wrapper.e-input-focus .e-input-filter {
        @if ($skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap5'  and $skin-name != 'tailwind') {
          padding: $ddl-list-filter-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-input-group {
        margin-bottom: 0;
      }

      #{if(&, '&', '*')} .e-ddl-footer,
      #{if(&, '&', '*')} .e-ddl-header {
        cursor: default;
      }
    }
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-ddl.e-input-group .e-ddl-hidden,
  .e-ddl.e-float-input .e-ddl-hidden {
    -webkit-appearance: initial;
    border: 0;
    height: 0;
    padding: 0;
    visibility: hidden;
    width: 0;
  }

  .e-ddl.e-input-group,
  .e-ddl.e-input-group.e-input-focus:focus {
    outline: none;
  }

  .e-dropdownbase .e-list-item .e-highlight {
    display: inline;
    font-weight: bold;
    vertical-align: baseline;
  }

  .e-ddl.e-input-group input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide),
  .e-float-input input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide),
  .e-float-input.e-input-group input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide) {
    opacity: 1;
  }

  .e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
    display: flex;
  }

  .e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
    display: none;
  }

  .e-input-group.e-static-clear input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-static-clear.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
    display: flex;
  }

  .e-ddl.e-input-group {
    .e-input-value,
    .e-input-value:focus {
      font-family: $ddl-input-font-family;
      font-size: $ddl-input-font-size;
      height: auto;
      margin: $ddl-zero-value;
      outline: none;
      width: 100%;
    }

    input[readonly].e-input,
    input[readonly],
    .e-dropdownlist {
      pointer-events: none;
    }
  }

  ejs-autocomplete,
  ejs-combobox,
  ejs-dropdownlist {
    display: block;
  }

  // Small Size

  .e-small .e-ddl#{&}.e-popup,
  .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-small-list-font-size;
      }
    }
  }

  .e-small.e-ddl#{&}.e-popup,
  .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-small-list-font-size;
      }
    }
  }

  //touch small
  .e-bigger.e-small .e-ddl#{&}.e-popup,
  .e-bigger .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-small-list-font-size;
      }
    }
  }

  .e-bigger.e-small.e-ddl#{&}.e-popup,
  .e-bigger .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-small-list-font-size;
      }
    }
  }

  .e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-content-placeholder.e-combobox.e-placeholder-combobox {
    background-size: 300px 33px;
    min-height: 33px;
  }

  .e-bigger .e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-bigger.e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-bigger .e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-bigger.e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-bigger .e-content-placeholder.e-combobox.e-placeholder-combobox,
  .e-bigger.e-content-placeholder.e-combobox.e-placeholder-combobox {
    background-size: 300px 40px;
    min-height: 40px;
  }
}


@include export-module('dropdownlist-theme') {
  #{&}.e-popup {
    border-color: $ddl-default-border-color;
  }

  .e-float-input.e-input-group.e-ddl.e-control.e-icon-anim > .e-float-text,
  .e-float-input.e-input-focus.e-input-group.e-ddl.e-control.e-keyboard > .e-float-text {
    color: $ddl-active-font-color;
  }
}


@include export-module('dropdownlist-material-icons') {
  .e-ddl .e-search-icon::before {
    content: '\e993';
  }

  .e-ddl .e-back-icon::before {
    content: '\e977';
  }

  .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    content: '\e969';
    font-family: 'e-icons';
  }
}

$input-skin-name: 'material' !default;
$zero-value: 0 !default;
$one-value: 1px !default;
$input-child-padding-bottom: $zero-value !default;
$input-child-small-bigger-padding-bottom: $zero-value !default;
$input-child-small-padding-bottom: $zero-value !default;
$input-child-bigger-padding-bottom: $zero-value !default;
$input-group-full-border: $border-size $border-type !default;
$input-child-small-bigger-padding-top: $zero-value !default;
$input-child-small-padding-top: $zero-value !default;
$input-child-padding-top: $zero-value !default;
$input-child-bigger-padding-top: $zero-value !default;
$input-success-color: $success-font-color !default;
$input-warning-color: $warning-font-color !default;
$input-error-color: $error-font-color !default;
$input-disable-bg-color: transparent !default;
$input-active-bg-color: $active-bg-color !default;
$input-active-font-color: $active-font-color !default;
$input-press-font-color: $active-font-color !default;

$input-box-border-radius: $zero-value !default;
$input-group-child-border-width: $zero-value !default;
$input-bg-color: transparent !default;
$input-font-size: 13px !default;
$input-bigger-font-size: 14px !default;
$input-small-font-size: 12px !default;
$input-bigger-small-font-size: 13px !default;
$input-padding: 4px $zero-value 4px !default;
$textarea-padding: 4px $zero-value 4px !default;
$textarea-bigger-padding: 5px $zero-value 5px !default;
$textarea-small-padding: 4px $zero-value 4px !default;
$textarea-bigger-small-padding: 4px $zero-value 4px !default;
$textarea-min-height: 15px !default;
$textarea-bigger-min-height: 17px !default;
$textarea-bigger-small-min-height: 15px !default;
$textarea-small-min-height: 14px !default;
$float-input-padding: 4px $zero-value 4px !default;
$float-label-padding: $zero-value !default;
$float-input-wrap-padding-top: $zero-value !default;
$input-padding-bottom: 4px !default;
$input-focus-padding-bottom: 3px !default;
$input-clear-icon: 12px !default;
$input-bigger-clear-icon: 12px !default;
$input-small-clear-icon: 10px !default;
$input-bigger-small-clear-icon: 12px !default;
$input-clear-icon-padding: $zero-value !default;
$input-clear-icon-position: center !default;
$input-bigger-padding: 5px $zero-value 5px !default;
$float-input-bigger-padding: 5px $zero-value 5px !default;
$float-input-bigger-wrap-padding-top: $zero-value !default;
$input-bigger-padding-bottom: 5px !default;
$input-focus-bigger-padding-bottom: 4px !default;
$input-child-padding: $zero-value !default;
$input-child-min-height: 18px !default;
$input-child-min-width: 18px !default;
$input-bigger-child-padding: $zero-value !default;
$input-bigger-child-min-height: 20px !default;
$input-bigger-child-min-width: 20px !default;
$input-margin-bottom: 4px !default;
$input-bigger-margin-bottom: 8px !default;
$input-small-margin-bottom: 4px !default;
$input-small-bigger-margin-bottom: 4px !default;
$input-margin-top: 16px !default;
$input-bigger-margin-top: 17px !default;
$input-small-margin-top: 16px !default;
$input-small-bigger-margin-top: 17px !default;
$input-small-padding: 4px $zero-value 4px !default;
$float-input-small-padding: 4px $zero-value 4px !default;
$float-input-small-wrap-padding-top: $zero-value !default;
$input-small-padding-bottom: 4px !default;
$input-focus-small-padding-bottom: 3px !default;
$input-bigger-small-padding: 4px $zero-value 4px !default;
$float-input-bigger-small-padding: 4px $zero-value 4px !default;
$float-input-bigger-small-wrap-padding-top: $zero-value !default;
$input-bigger-small-padding-bottom: 4px !default;
$input-focus-bigger-small-padding-bottom: 3px !default;
$input-bigger-small-child-padding: $zero-value !default;
$input-bigger-small-child-min-height: 18px !default;
$input-bigger-small-child-min-width: 18px !default;
$input-small-child-padding: $zero-value !default;
$input-small-child-min-height: 16px !default;
$input-small-child-min-width: 16px !default;
$input-font-family: $font-family !default;
$input-font-style: normal !default;
$input-font-normal: normal !default;
$input-border: $zero-value $border-type !default;
$float-input-border: $zero-value $border-type !default;
$input-box-border-width: $zero-value $zero-value $one-value $zero-value !default;
$float-input-border-width: $zero-value $zero-value $one-value $zero-value !default;
$input-focus-border-width: $zero-value $zero-value 2px $zero-value !default;
$input-box-border-color: rgba($grey-light-font, .42) !default;
$input-font-color: rgba($grey-light-font, .87) !default;
$input-icon-font-color: rgba($grey-black, .54) !default;
$input-clear-icon-color: rgba($grey-light-font, .54) !default;
$input-clear-icon-hover-color: rgba($grey-light-font, .54) !default;
$input-error-color: $error-font !default;
$input-accent: $accent !default;
$input-placeholder: rgba($grey-light-font, .42) !default;
$input-active-border-color: $accent !default;
$input-group-active-border-color: transparent !default;
$input-disable-border-type: dashed !default;
$input-disable-border-color: $input-box-border-color !default;
$input-disabled-group-bg-color: transparent !default;
$input-border-left-width: $zero-value !default;
$input-group-active-border: transparent !default;
$input-group-border: 1px $border-type !default;
$input-group-border-width: $zero-value !default;
$input-group-border-radius: 2px !default;
$input-group-pressed-bg: transparent !default;
$input-hover-bg-color:  $grey-200 !default;
$input-active-accent-color: $accent !default;
$input-valid-group-border-width: 2px !default;
$input-header-font-color: rgba($grey-light-font, .42) !default;
$input-child-margin-bottom: 4px !default;
$input-child-margin-right: 4px !default;
$input-child-margin-top: 4px !default;
$float-input-child-margin-top: 2px !default;
$input-child-small-bigger-margin-bottom: 4px !default;
$input-child-small-bigger-margin-right: 4px !default;
$input-child-small-bigger-margin-top: 4px !default;
$float-input-child-small-bigger-margin-top: 4px !default;
$input-child-small-margin-bottom: 4px !default;
$input-child-small-margin-right: 4px !default;
$input-child-small-margin-top: 4px !default;
$float-input-child-small-margin-top: 4px !default;
$input-child-bigger-margin-bottom: 5px !default;
$input-child-bigger-margin-right: 8px !default;
$input-child-bigger-margin-top: 6px !default;
$float-input-child-bigger-margin-top: 6px !default;
$input-disable-group-border-width: $zero-value $zero-value $one-value $zero-value !default;
$input-opacity: 1 !default;
$input-opacity-filter: 100 !default;
$input-group-border-width-focus: $zero-value $zero-value $one-value $zero-value !default;
$input-group-border-type-focus: $border-type !default;
$input-group-border-color-focus: $input-box-border-color !default;
$input-group-border-color-hover: $input-box-border-color !default;
$input-group-border-width-hover: 1px !default;
$input-group-border-right-focus: transparent !default;
$input-group-border-left-focus: transparent !default;
$input-group-full-border-color: $input-box-border-color !default;
$input-group-full-border-width: $zero-value $zero-value $one-value $zero-value !default;
$input-group-success-color: $input-success-color !default;
$input-group-warning-color: $input-warning-color !default;
$input-group-error-color: $input-error-color !default;
$input-valid-border-bottom-width: 2px !default;
$input-group-pressed-color: rgba($grey-black, .54) !default;
$input-select-font-color: $grey-dark-font !default;
$input-right-border-width: $zero-value !default;
$input-text-indent: $zero-value !default;
$input-small-text-indent: $zero-value !default;
$input-bigger-text-indent: $zero-value !default;
$input-small-bigger-text-indent: $zero-value !default;
$input-disable-font-color: rgba($grey-light-font, .42) !default;
$float-label-font-color: rgba($grey-light-font, .54) !default;
$float-label-disbale-font-color: $input-disable-font-color !default;
$float-label-font-size: 13px !default;
$float-label-bigger-font-size: 14px !default;
$float-label-small-font-size: 12px !default;
$float-label-bigger-small-font-size: 13px !default;
$float-placeholder-font-size: 13px !default;
$float-placeholder-bigger-font-size: 14px !default;
$float-placeholder-small-font-size: 12px !default;
$float-placeholder-bigger-small-font-size: 13px !default;
$input-border-size: 1px !default;
$input-normal-height: 32px - $input-border-size !default;
$input-bigger-height: 40px - $input-border-size !default;
$input-small-height: 26px - $input-border-size !default;
$input-bigger-small-height: 36px - $input-border-size !default;
$float-input-normal-height: 32px !default;
$float-input-bigger-height: 40px !default;
$float-input-small-height: 26px !default;
$float-input-bigger-small-height: 36px !default;
$input-full-height: 100% !default;
$textarea-normal-height: auto !default;
$textarea-bigger-height: auto !default;
$textarea-small-height: auto !default;
$textarea-bigger-small-height: auto !default;
$textarea-full-height: 100% !default;
$input-group-disabled-color: rgba($grey-light-font, .26) !default;
$input-group-hovered-color: $input-icon-font-color !default;
$input-icon-font-size: 12px !default;
$input-bigger-icon-font-size: 12px !default;
$input-small-icon-font-size: 12px !default;
$input-bigger-small-icon-font-size: 12px !default;
$input-inner-wrap-margin-left: 8px !default;
$input-clear-icon-padding-bottom: 4px !default;
$input-clear-icon-padding-right: 4px !default;
$input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
$input-clear-icon-padding-top: 4px !default;
$float-input-clear-icon-padding-top: 4px !default;
$input-clear-icon-small-bigger-padding-bottom: 4px !default;
$input-clear-icon-small-bigger-padding-right: 4px !default;
$input-clear-icon-small-bigger-padding-top: 4px !default;
$float-input-clear-icon-small-bigger-padding-top: 4px !default;
$input-clear-icon-small-padding-bottom: 4px !default;
$input-clear-icon-small-padding-right: 4px !default;
$input-clear-icon-small-padding-top: 4px !default;
$float-input-clear-icon-small-padding-top: 4px !default;
$input-clear-icon-bigger-padding-bottom: 5px !default;
$input-clear-icon-bigger-padding-right: 8px !default;
$input-clear-icon-bigger-padding-top: 6px !default;
$float-input-clear-icon-bigger-padding-top: 6px !default;
$input-clear-icon-min-height: 18px !default;
$input-clear-icon-min-width: 18px !default;
$input-bigger-clear-icon-min-height: 20px !default;
$input-bigger-clear-icon-min-width: 20px !default;
$input-bigger-small-clear-icon-min-height: 18px !default;
$input-bigger-small-clear-icon-min-width: 18px !default;
$input-small-clear-icon-min-height: 16px !default;
$input-small-clear-icon-min-width: 16px !default;
$input-smaller-min-height: 16px !default;
$textarea-smaller-min-height: 18px !default;
$input-min-height: 19px !default;
$textarea-min-height: 23px !default;
$input-bigger-min-height: 23px !default;
$input-bigger-smaller-min-height: 19px !default;
$float-label-rtl-value: -7px !default;

$input-left-icon-font-size: 20px !default;
$input-bigger-left-icon-font-size: 20px !default;
$input-small-left-icon-font-size: 20px !default;
$input-bigger-small-left-icon-font-size: 20px !default;
$input-left-child-min-height: 30px !default;
$input-left-child-min-width: 30px !default;
$input-bigger-left-child-min-height: 32px !default;
$input-bigger-left-child-min-width: 32px !default;
$input-small-left-child-min-height: 28px !default;
$input-small-left-child-min-width: 28px !default;
$input-bigger-small-left-child-min-height: 30px !default;
$input-bigger-small-left-child-min-width: 30px !default;
$input-icon-inner-width: 10px !default;
$input-icon-inner-height: 10px !default;
$input-readonly-bg-color: none !default;

// Outline textbox

$outline-border-color: rgba($grey-black, .24) !default;
$outline-input-font-color: rgba($grey-light-font, .87) !default;
$outline-input-label-font-color: rgba($grey-light-font, .54) !default;
$outline-input-font-size: 14px !default;
$outline-hover-border-color: rgba($grey-black, .87) !default;
$outline-hover-font-color: rgba($grey-black, .87) !default;
$outline-active-input-border: 1px !default;
$outline-input-padding-left: 12px !default;
$outline-input-padding-top: 10px !default;
$outline-input-padding-bottom: 9px !default;
$outline-input-min-height: 38px !default;
$outline-input-icon-margin-left: $zero-value !default;
$outline-input-icon-margin-right: 12px !default;
$outline-small-input-min-height: 34px !default;
$outline-small-input-padding-left: 10px !default;
$outline-small-input-padding-top: 7px !default;
$outline-small-input-icon-margin-left: 10px !default;
$outline-small-input-icon-margin-right: 6px !default;
$outline-bigger-input-min-height: 54px !default;
$outline-bigger-input-icon-margin-left: 16px !default;
$outline-bigger-input-icon-margin-right: 8px !default;
$outline-bigger-input-padding-left: 16px !default;
$outline-bigger-input-padding-top: 15px !default;
$outline-small-bigger-input-min-height: 38px !default;
$outline-small-bigger-input-margin-top: 10px !default;
$outline-small-bigger-input-margin-bottom: 9px !default;
$outline-small-bigger-input-margin-left: 12px !default;
$outline-small-bigger-icon-margin-left: 12px !default;
$outline-small-bigger-icon-margin-right: 8px !default;
$outline-input-border: $zero-value !default;
$outline-input-group-border-width: $zero-value !default;
$outline-disabled-border-color: rgba($grey-black, .06) !default;
$outline-float-label-top: -7px !default;
$outline-label-before-element-margin-top: 6px !default;
$outline-wrapper-border-infocused: 2px !default;
$outline-label-min-width: 9px !default;
$outline-small-label-min-width: 7px !default;
$outline-bigger-label-min-width: 13px !default;
$outline-bigger-small-label-min-width: 9px !default;
$outline-label-height: 8px !default;
$outline-label-margin: 4px !default;
$outline-label-border-radius: 5px !default;
$outline-label-before-left: -1px !default;
$outline-label-after-left: 2px !default;
$outline-input-icon-padding-top-bottom: 9px !default;
$outline-input-icon-font-size: 16px !default;
$outline-input-clear-icon-font-size: 16px !default;
$outline-floating-label-font-size: 12px !default;
$outline-bigger-input-font-size: 16px !default;
$outline-bigger-input-icon-padding: 15px !default;
$outline-bigger-input-icon-font-size: 20px !default;
$outline-bigger-clear-icon-font-size: 20px !default;
$outline-small-bigger-input-label-font-size: 12px !default;
$outline-small-bigger-input-icon-font-size: 18px !default;
$outline-small-bigger-clear-icon-font-size: 18px !default;
$outline-label-font-color-with-value: rgba($grey-light-font, .6) !default;
$outline-valid-input-font-size: 14px !default;
$outline-label-default-line-height: 13px !default;
$outline-label-before-left-rtl: 5px !default;
$outline-label-after-left-rtl: -6px !default;
$outline-label-line-height: 54px !default;
$outline-bigger-label-line-height: 70px !default;
$outline-small-bigger-label-line-height: 53px !default;
$outline-small-label-line-height: 46px !default;
$outline-textarea-label-line-height: 50px !default;
$outline-valid-textarea-font-size: 14px !default;
$outline-textarea-small-label-line-height: 60px !default;
$outline-textarea-bigger-label-line-height: 66px !default;
$outline-textarea-small-bigger-label-line-height: 60px !default;
$outline-textarea-margin-top: 8px $zero-value 1px !default;
$outline-small-textarea-margin-top: 8px $zero-value 1px !default;
$outline-bigger-textarea-maring-top: 8px $zero-value 1px !default;
$outline-small-input-font-size: 13px !default;
$outline-small-input-icon-font-size: 14px !default;
$outline-small-clear-icon-font-size: 14px !default;
$outline-small-label-font-size: 11px !default;
$outline-bigger-label-font-size: 12px !default;
$outline-small-bigger-input-font-size: 14px !default;
$outline-small-bigger-label-font-size: 12px !default;
$outline-bigger-small-group-icon-top: 9px !default;
$outline-bigger-small-group-icon-bottom: 9px !default;
$outline-input-small-clear-icon: 14px !default;
$outline-input-clear-icon: 16px !default;
$outline-input-bigger-clear-icon: 20px !default;
$outline-input-bigger-small-clear-icon: 18px !default;
$outline-input-clear-icon-hover-color: rgba($grey-light-font, .87) !default;
$outline-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;

$outline-float-label-font-size: 14px !default;
$bigger-outline-float-label-font-size: 16px !default;
$bigger-small-outline-float-label-font-size: 14px !default;
$small-outline-float-label-font-size: 13px !default;
$outline-float-label-disbale-font-color: rgba($grey-light-font, .38) !default;
$outline-disabled-input-font-color: rgba($grey-light-font, .38) !default;
$outline-input-group-disabled-color: rgba($grey-light-font, .38) !default;

@mixin input-sizing {
  box-sizing: content-box;
}

@mixin input-height ($height) {
  content: '';
}

@mixin input-state-color ($color) {
  border-bottom-color: $color;
}

@mixin input-selection {
  background: $input-accent;
  color: $accent-font;
}

@mixin float-label-alignment {
  content: '';
}

/* stylelint-disable property-no-vendor-prefix */
@mixin input-group-animation {
  -moz-transition: .2s cubic-bezier(.4, 0, .4, 1);
  bottom: 0;
  content: '';
  height: 2px;
  position: absolute;
  transition: .2s cubic-bezier(.4, 0, .4, 1);
  width: 0;
}

@mixin input-group-animation-left {
  left: 50%;
}

@mixin input-group-animation-width {
  width: 50%;
}

@mixin input-group-animation-right {
  right: 50%;
}

@mixin input-group-animation-bg {
  background: $input-active-border-color;
}

@mixin input-group-hover-bg {
  background: $input-group-border-color-hover;
}

@mixin input-group-success-animation-bg {
  background: $input-success-color;
}

@mixin input-group-warning-animation-bg {
  background: $input-warning-color;
}

@mixin input-group-error-animation-bg {
  background: $input-error-color;
}

@mixin input-ripple-parent {
  position: relative;
}

@mixin input-ripple-style {
  background: $grey-400;
  border-radius: 100%;
  content: '';
  display: block;
  filter: alpha(opacity=75);
  height: 50%;
  left: 25%;
  opacity: .75;
  position: absolute;
  top: 25%;
  transform: scale(0);
  width: 50%;
}

@mixin input-ripple-animation {
  animation: e-input-ripple .45s linear;
}

@keyframes e-input-ripple {
  100% {
    opacity: 0;
    transform: scale(4);
  }
}

@keyframes slideTopUp {
  from{ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1); }
  to{ transform: translate3d($zero-value, $zero-value, $zero-value) scale(1); }
}

//Filled input configuration
$filled-input-font-size: 14px !default;
$bigger-filled-input-font-size: 16px !default;
$bigger-small-filled-input-font-size: 14px !default;
$small-filled-input-font-size: 13px !default;
$filled-float-label-font-size: 14px !default;
$bigger-filled-float-label-font-size: 16px !default;
$bigger-small-filled-float-label-font-size: 14px !default;
$small-filled-float-label-font-size: 13px !default;
$filled-input-clear-icon-size: 16px !default;
$bigger-filled-input-clear-icon-size: 20px !default;
$bigger-small-filled-input-clear-icon-size: 18px !default;
$small-filled-input-clear-icon-size: 14px !default;
$filled-input-icon-size: 16px !default;
$bigger-filled-input-icon-size: 20px !default;
$bigger-small-filled-input-icon-size: 18px !default;
$small-filled-input-icon-size: 14px !default;

$filled-float-input-wrapper-padding: $zero-value 10px $zero-value 12px !default;
$bigger-filled-float-input-wrapper-padding: $zero-value 12px $zero-value 16px !default;
$bigger-small-filled-float-input-wrapper-padding: $zero-value 10px $zero-value 12px !default;
$small-filled-float-input-wrapper-padding: $zero-value 6px $zero-value 8px !default;

$filled-float-input-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
$bigger-filled-float-input-wrapper-rtl-padding: $zero-value 16px $zero-value 12px !default;
$bigger-small-filled-float-input-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
$small-filled-float-input-wrapper-rtl-padding: $zero-value 8px $zero-value 6px !default;

$filled-wrapper-padding: $zero-value 10px $zero-value 12px !default;
$bigger-filled-wrapper-padding: $zero-value 12px $zero-value 16px !default;
$bigger-small-filled-wrapper-padding: $zero-value 10px $zero-value 12px !default;
$small-filled-wrapper-padding: $zero-value 6px $zero-value 8px !default;

$filled-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
$bigger-filled-wrapper-rtl-padding: $zero-value 16px $zero-value 12px !default;
$bigger-small-filled-wrapper-rtl-padding: $zero-value 12px $zero-value 10px !default;
$small-filled-wrapper-rtl-padding: $zero-value 8px $zero-value 6px !default;

$filled-wrapper-margin: $zero-value !default;

$filled-input-padding: 10px 2px 10px $zero-value !default;
$filled-bigger-input-padding: 16px 4px 16px $zero-value !default;
$filled-bigger-small-input-padding: 10px 2px 10px $zero-value !default;
$filled-small-input-padding: 7px 2px 7px $zero-value !default;

$filled-input-rtl-padding: 10px $zero-value 10px 2px !default;
$filled-bigger-input-rtl-padding: 16px $zero-value 16px 4px !default;
$filled-bigger-small-input-rtl-padding: 10px $zero-value 10px 2px !default;
$filled-small-input-rtl-padding: 7px $zero-value 7px 2px !default;

$filled-input-padding-bottom: 10px !default;
$filled-bigger-input-padding-bottom: 16px !default;
$filled-bigger-small-input-padding-bottom: 10px !default;
$filled-small-input-padding-bottom: 7px !default;

$filled-float-input-padding: 14px 2px 5px $zero-value !default;
$filled-bigger-float-input-padding: 20px 4px 6px $zero-value !default;
$filled-bigger-small-float-input-padding: 14px 2px 5px $zero-value !default;
$filled-small-float-input-padding: 12px 2px 4px $zero-value !default;

$filled-float-input-rtl-padding: 14px $zero-value 5px 2px !default;
$filled-bigger-float-input-rtl-padding: 20px $zero-value 6px 4px !default;
$filled-bigger-small-float-input-rtl-padding: 14px $zero-value 5px 2px !default;
$filled-small-float-input-rtl-padding: 12px $zero-value 4px 2px !default;

$filled-textarea-padding: $zero-value 12px 10px !default;
$filled-bigger-textarea-padding: $zero-value 16px 16px !default;
$filled-bigger-small-textarea-padding: $zero-value 12px 10px !default;
$filled-small-textarea-padding: $zero-value 8px 7px !default;

$filled-float-textarea-padding: $zero-value 12px 5px !default;
$filled-bigger-float-textarea-padding: $zero-value 16px 5px !default;
$filled-bigger-small-float-textarea-padding: $zero-value 12px 5px !default;
$filled-small-float-textarea-padding: $zero-value 8px 4px !default;

$filled-textarea-wrapper-padding: 10px $zero-value $zero-value !default;
$bigger-filled-textarea-wrapper-padding: 16px $zero-value $zero-value !default;
$bigger-small-filled-textarea-wrapper-padding: 10px $zero-value $zero-value !default;
$small-filled-textarea-wrapper-padding: 7px $zero-value $zero-value !default;

$filled-float-textarea-wrapper-padding: 14px $zero-value $zero-value !default;
$bigger-filled-float-textarea-wrapper-padding: 20px $zero-value $zero-value !default;
$bigger-small-filled-float-textarea-wrapper-padding: 14px $zero-value $zero-value !default;
$small-filled-float-textarea-wrapper-padding: 12px $zero-value $zero-value !default;

$filled-input-label-top: 12px !default;
$bigger-filled-input-label-top: 18px !default;
$bigger-small-filled-input-label-top: 12px !default;
$small-filled-input-label-top: 10px !default;
$filled-input-label-top-after-floating: 12px !default;
$bigger-filled-input-label-top-after-floating: 18px !default;
$bigger-small-filled-input-label-top-after-floating: 12px !default;
$small-filled-input-label-top-after-floating: 10px !default;
$filled-input-label-left: 12px !default;
$bigger-filled-input-label-left: 16px !default;
$bigger-small-filled-input-label-left: 12px !default;
$small-filled-input-label-left: 8px !default;
$filled-input-label-initial-transform: none !default;
$filled-input-label-line-height: 1.2 !default;
$bigger-filled-input-label-line-height: 1.25 !default;
$small-filled-input-label-line-height: 1.2 !default;
$bigger-small-filled-input-label-line-height: 1.25 !default;
$filled-input-label-width: auto !default;

$filled-default-input-min-height: 39px !default;
$bigger-filled-default-input-min-height: 55px !default;
$bigger-small-filled-default-input-min-height: 39px !default;
$small-filled-default-input-min-height: 35px !default;

$filled-input-min-height: 39px !default;
$bigger-filled-input-min-height: 55px !default;
$bigger-small-filled-input-min-height: 39px !default;
$small-filled-input-min-height: 35px !default;

$filled-input-icon-min-height: 20px !default;
$bigger-filled-input-icon-min-height: 24px !default;
$bigger-small-filled-input-icon-min-height: 20px !default;
$small-filled-input-icon-min-height: 18px !default;

$filled-input-left-icon-min-height: 20px !default;
$bigger-filled-input-left-icon-min-height: 24px !default;
$bigger-small-filled-input-left-icon-min-height: 20px !default;
$small-filled-input-left-icon-min-height: 18px !default;

$filled-input-left-icon-min-width: 20px !default;
$bigger-filled-input-left-icon-min-width: 24px !default;
$bigger-small-filled-input-left-icon-min-width: 20px !default;
$small-filled-input-left-icon-min-width: 18px !default;

$filled-input-bg-color: $grey-100 !default;
$filled-input-overlay-bg-color: rgba($grey-black, .87) !default;
$filled-input-overlay-focused-bg-color: #ececec !default;
$filled-input-overlay-activated-bg-color: #dcdcdc !default;
$background-color-transition: opacity 15ms linear,
  background-color 15ms linear !default;
$filled-input-hover-border-color: rgba($grey-black, .87) !default;
$filled-input-float-label-color: rgba($grey-light-font, .6) !default;
$filled-input-disabled-font-color: rgba($grey-light-font, .38) !default;
$filled-input-disabled-bg-color: $grey-50 !default;
$filled-input-disabled-border-color: rgba($grey-black, .06) !default;
$filled-input-clear-icon-hover-color: rgba($grey-light-font, .87) !default;
$filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;

@include export-module('input-layout') {

  /*! input layout */
  .e-input-group,
  .e-input-group.e-control-wrapper {
    display: table;
    line-height: 1.4;
    margin-bottom: $input-margin-bottom;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input {
    border: $input-border;
    border-width: $input-box-border-width;
    height: auto;
    line-height: inherit;
    margin: $zero-value;
    margin-bottom: $input-margin-bottom;
    outline: none;
    padding: $input-padding;
    text-indent: $input-text-indent;
    width: 100%;
  }

  input.e-input#{$css},
  textarea.e-input#{$css},
  .e-input-group,
  .e-input-group.e-control-wrapper {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: normal;
  }

  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: normal;
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input {
    font: inherit;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group input,
  input.e-input#{$css}:focus,
  .e-input-group input.e-input:focus,
  .e-input-group input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-input-group.e-control-wrapper input:focus,
  .e-float-input input:focus,
  .e-float-input.e-input-group input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input.e-control-wrapper.e-input-group input:focus {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-input-focus input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input,
  .e-float-input.e-input-focus input,
  .e-float-input.e-input-group.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group input,
  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-float-input,
  .e-float-input.e-control-wrapper {
    border-radius: $input-box-border-radius;
  }

  .e-input.e-small,
  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-small input,
  .e-input-group.e-control-wrapper.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small input,
  .e-float-input.e-small input,
  .e-float-input.e-input-group.e-small input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-float-input.e-small,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-input-group,
  .e-small .e-input-group.e-control-wrapper,
  .e-small .e-input-group .e-input,
  .e-small .e-input-group input,
  .e-small .e-input-group.e-control-wrapper .e-input,
  .e-small .e-input-group.e-control-wrapper input,
  .e-small .e-float-input input,
  .e-small .e-float-input.e-input-group input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-small .e-float-input,
  .e-small .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
      border-radius: $input-small-border-radius;
    }
  }

  .e-input#{$css}:focus {
    border-width: $input-focus-border-width;
    padding-bottom: $input-padding-bottom;
  }

  .e-input.e-small#{$css}:focus {
    border-width: $input-focus-border-width;
    padding-bottom: $input-small-padding-bottom;
  }

  .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    padding-bottom: $input-bigger-padding-bottom;
  }

  .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-input.e-small#{$css}:focus {
    padding-bottom: $input-bigger-small-padding-bottom;
  }

  .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-padding-bottom;
    }
  }

  .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-small-padding-bottom;
    }
  }

  .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-bigger-padding-bottom;
    }
  }

  .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $input-focus-bigger-small-padding-bottom;
    }
  }

  .e-input-group input.e-input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input {
    padding: $input-padding;
  }

  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus {
    padding: $textarea-padding;
  }

  input.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-input-group.e-bigger,
  .e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
      border-radius: $input-bigger-border-radius;
    }
    font-size: $input-bigger-font-size;
  }

  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-bigger input,
  .e-float-input.e-input-group.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group input,
  .e-bigger .e-input-group.e-control-wrapper .e-input,
  .e-bigger .e-input-group.e-control-wrapper input,
  .e-bigger .e-float-input input,
  .e-bigger .e-float-input.e-input-group input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
  .e-bigger .e-float-input,
  .e-bigger .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
      border-radius: $input-bigger-border-radius;
    }
  }

  input.e-input.e-bigger.e-small#{$css},
  textarea.e-input.e-bigger.e-small#{$css},
  .e-bigger.e-small input.e-input#{$css},
  .e-bigger.e-small textarea.e-input#{$css},
  .e-input-group.e-bigger.e-small,
  .e-bigger.e-small .e-input-group,
  .e-bigger.e-small .e-input-group.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
      border-radius: $input-bigger-small-border-radius;
    }
  }

  .e-input-group.e-bigger.e-small .e-input,
  .e-input-group.e-bigger.e-small input,
  .e-input-group.e-control-wrapper.e-bigger.e-small .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small input,
  .e-float-input.e-input-group.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small,
  .e-float-input.e-control-wrapper.e-bigger.e-small,
  .e-bigger.e-small .e-input-group .e-input,
  .e-bigger.e-small .e-input-group input,
  .e-bigger.e-small .e-input-group.e-control-wrapper .e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-float-input input,
  .e-bigger.e-small .e-float-input.e-input-group input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-bigger.e-small .e-float-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
      border-radius: $input-bigger-small-border-radius;
    }
  }

  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input {
    font: inherit;
  }

  input.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger#{$css},
  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger input.e-input#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input {
    line-height: inherit;
    margin-bottom: $input-bigger-margin-bottom;
    padding: $input-bigger-padding;
  }

  .e-input-group.e-bigger .e-input:focus,
  .e-bigger .e-input-group .e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger .e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper .e-input:focus,
  .e-input-group.e-bigger.e-input-focus .e-input,
  .e-bigger .e-input-group.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus .e-input {
    padding: $input-bigger-padding;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    align-items: center;
    border: $input-border;
    border-width: $input-group-child-border-width;
    box-sizing: content-box;
    cursor: pointer;
    flex-direction: column;
    font-size: $input-icon-font-size;
    justify-content: center;
    line-height: 1;
    min-height: $input-child-min-height;
    min-width: $input-child-min-width;
    padding: $input-child-padding;
    text-align: center;
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border: 1px solid;
      border-bottom: $zero-value;
      border-collapse: collapse;
      border-top: $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      border-radius: $input-child-icon-border-radius;
    }
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-collapse: collapse;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-right-width: $zero-value;
    }
  }

  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon + .e-input-group-icon .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon,
  .e-rtl .e-input-group .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: 1px;
      border-right-width: $zero-value;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: 1px;
      border-right-width: $zero-value;
    }
  }

  .e-input-group.e-rtl input ~ .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon,
  .e-rtl .e-input-group input ~ .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: $zero-value;
      border-right: 1px solid $input-box-border-color;
    }
  }

  .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group input ~ .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: $zero-value;
      border-right-width: 1px;
    }
  }

  .e-input-group .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
      border-bottom-right-radius: $input-group-icon-border-radius;
      border-top-right-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
      border-bottom-left-radius: $input-group-icon-border-radius;
      border-top-left-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-rtl .e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'tailwind') {
      border-bottom-left-radius: $input-group-icon-border-radius;
      border-bottom-right-radius: $zero-value;
      border-top-left-radius: $input-group-icon-border-radius;
      border-top-right-radius: $zero-value;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child,
  .e-rtl .e-input-group .e-input-group-icon:first-child,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      border-bottom-left-radius: $zero-value;
      border-bottom-right-radius: $input-group-icon-border-radius;
      border-top-left-radius: $zero-value;
      border-top-right-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $input-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-left-child-min-height;
      min-width: $input-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    min-height: $input-bigger-child-min-height;
    min-width: $input-bigger-child-min-width;
    @if $input-skin-name == 'Material3' {
      border-radius: $input-bigger-icon-border-radius;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: $input-bigger-icon-font-size;
    padding: $input-bigger-child-padding;
  }

  .e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $input-bigger-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-bigger-left-child-min-height;
      min-width: $input-bigger-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $input-small-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-small-left-child-min-height;
      min-width: $input-small-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $input-bigger-small-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-bigger-small-left-child-min-height;
      min-width: $input-bigger-small-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input-group.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: transparent;
    }
  }

  .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      cursor: auto;
    }
  }

  .e-input#{$css}[disabled],
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-disabled input,
  .e-input-group.e-disabled input.e-input,
  .e-input-group.e-disabled textarea,
  .e-input-group.e-disabled textarea.e-input,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled input,
  .e-input-group.e-control-wrapper.e-disabled input.e-input,
  .e-input-group.e-control-wrapper.e-disabled textarea,
  .e-input-group.e-control-wrapper.e-disabled textarea.e-input,
  .e-float-input.e-disabled input,
  .e-float-input.e-disabled textarea,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled textarea,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled,
  .e-input-group.e-disabled span,
  .e-input-group.e-control-wrapper.e-disabled span {
    cursor: not-allowed;
  }

  .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-disable-border-color;
      border-style: $input-disable-border-type;
    }
  }

  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-style: $input-disable-border-type;
      border-width: $input-disable-group-border-width;
    }
  }

  .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input.e-disabled,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled input {
    filter: alpha(opacity=$input-opacity-filter);
    opacity: $input-opacity;
  }

  .e-input#{$css}.e-rtl,
  .e-input-group.e-rtl,
  .e-input-group.e-control-wrapper.e-rtl   {
    direction: rtl;
  }

  .e-input#{$css}.e-corner {
    border-radius: $input-box-border-radius;
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    display: inline-flex;
    vertical-align: middle;
  }

  .e-float-input:not(.e-input-group),
  .e-float-input.e-control-wrapper:not(.e-input-group) {
    display: inline-block;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    display: flex;
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
      border-left-width: $input-border-left-width;
    }
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    white-space: nowrap;
  }

  .e-input-group .e-input-group-icon:not(:last-child),
  .e-input-group.e-control-wrapper .e-input-group-icon:not(:last-child) {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
      border-right-width: $zero-value;
    }
  }

  .e-input + .e-input-group-icon,
  .e-input-group .e-input + .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input + .e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  
  .e-float-input.e-input-group.e-small:not(:disabled) .e-input-group-icon:first-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(:disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-corner .e-input:first-child,
  .e-input-group.e-corner .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-corner .e-input:first-child,
  .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:first-child {
    border-bottom-left-radius: $input-box-border-radius;
    border-top-left-radius: $input-box-border-radius;
  }

  .e-input-group.e-corner .e-input:last-child,
  .e-input-group.e-corner .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-corner .e-input:last-child,
  .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:last-child {
    border-bottom-right-radius: $input-box-border-radius;
    border-top-right-radius: $input-box-border-radius;
  }

  .e-input-group.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child  {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
      border-left-width: $zero-value;
      border-right-width: $input-border-left-width;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
      border-left-width: $input-border-left-width;
      border-right-width: $zero-value;
    }
  }

  
  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:not(:last-child),
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:not(:last-child) {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
      border-left-width: $input-border-left-width;
    }
  }

  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      border-width: $zero-value + px 1px $zero-value + px 1px;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon + .e-input,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
      border-right-width: $zero-value;
    }
  }

  input.e-input.e-small#{$css},
  textarea.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-small textarea.e-input#{$css},
  .e-input-group.e-small,
  .e-small .e-input-group,
  .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-control-wrapper,
  .e-input-group.e-small.e-disabled,
  .e-small .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-input-group.e-control-wrapper.e-disabled {
    font-size: $input-small-font-size;
  }

  .e-input-group.e-small .e-input,
  .e-input-group.e-small.e-control-wrapper .e-input,
  .e-small .e-input-group .e-input,
  .e-small .e-input-group.e-control-wrapper .e-input {
    font: inherit;
  }

  .e-input#{$css}.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input {
    line-height: inherit;
    padding: $input-small-padding;
  }

  .e-input-group.e-small .e-input:focus,
  .e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-input-group.e-small.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    padding: $input-small-padding;
  }

  .e-input.e-small.e-bigger#{$css},
  .e-input-group.e-small.e-bigger,
  .e-small.e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-input-group.e-control-wrapper,
  .e-bigger .e-input#{$css}.e-small,
  .e-small .e-input#{$css}.e-bigger,
  .e-bigger .e-input-group.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-bigger,
  .e-small .e-input-group.e-control-wrapper.e-bigger {
    font-size: $input-bigger-small-font-size;
  }

  .e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-input#{$css}.e-small.e-disabled,
  .e-small .e-input#{$css}.e-bigger.e-disabled,
  .e-bigger .e-input-group.e-small.e-disabled,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-input-group.e-bigger.e-disabled,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-disabled {
    font-size: $input-bigger-small-font-size;
  }

  .e-input.e-small.e-bigger#{$css},
  .e-bigger .e-input#{$css}.e-small,
  .e-small .e-input#{$css}.e-bigger {
    padding: $input-bigger-small-padding;
  }

  .e-input-group.e-small.e-bigger .e-input,
  .e-input-group.e-small .e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input.e-bigger,
  .e-bigger .e-input-group.e-small .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input {
    font: inherit;
    padding: $input-bigger-small-padding;
  }

  .e-input-group.e-small.e-bigger .e-input:focus,
  .e-input-group.e-small .e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-small .e-input:focus,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input:focus,
  .e-input-group.e-control-wrapper.e-small .e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-input-group.e-small.e-bigger.e-input-focus .e-input,
  .e-input-group.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-input-group.e-small.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    padding: $input-bigger-small-padding;
  }

  .e-input-group.e-small .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-input-group .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: $input-small-icon-font-size;
    min-height: $input-small-child-min-height;
    min-width: $input-small-child-min-width;
    padding: $input-small-child-padding;
    @if $input-skin-name == 'Material3' {
      border-radius: $input-small-child-border-radius;
    }
  }

  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-bigger):not(.e-float-icon-left) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-bigger):not(.e-float-icon-left) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px  1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-bigger.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-bigger.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-small.e-bigger .e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
  .e-bigger .e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    font-size: $input-bigger-small-icon-font-size;
    min-height: $input-bigger-small-child-min-height;
    min-width: $input-bigger-small-child-min-width;
    padding: $input-bigger-small-child-padding;
    @if $input-skin-name == 'Material3' {
      border-radius: $input-bigger-small-child-border-radius;
      margin: $input-bigger-small-child-margin;
    }
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-font-size;
    font-style: $input-font-style;
    font-weight: normal;
    left: 0;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: -11px;
    transform: translate3d(0, 16px, 0) scale(1);
    transform-origin: left top;
    transition: .25s cubic-bezier(.25, .8, .25, 1);
    user-select: none;
    white-space: nowrap;
    width: 100%;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    top: -11px;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @include float-label-alignment;
    font-style: $input-font-style;
  }

  .e-float-input.e-bigger label.e-float-text,
  .e-float-input label.e-float-text.e-bigger,
  .e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input label.e-float-text,
  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
    }
  }

  .e-float-input.e-small label.e-float-text,
  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -11px;
    }
  }

  .e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-float-input.e-small label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
    }
    font-style: $input-font-style;
  }

  .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -11px;
    }
  }

  .e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-float-input .e-input-in-wrap label.e-float-text.e-bigger,
  .e-float-input .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
    }
  }

  .e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
  }

  .e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
  }

  .e-float-input input:focus ~ label.e-float-text,
  .e-float-input input:valid ~ label.e-float-text,
  .e-float-input input ~ label.e-label-top.e-float-text,
  .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input input:focus ~ label.e-float-text,
  .e-small .e-float-input input:valid ~ label.e-float-text,
  .e-small .e-float-input input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -38px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap4') {
      padding-right: 0;
      transform: translate3d(-10px, -42px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text,
  .e-small .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
    }
  }

  .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 14px;
    }
  }

  .e-float-input.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -7px;
    }
  }

  .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 17px;
    }
  }

  .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -7px;
    }
  }

  .e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -7px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or  $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: 0;
      top: 16px;
    }
  }

  .e-float-input.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
  }

  .e-float-input,
  .e-float-input.e-control-wrapper {
    line-height: 1.4;
    margin-bottom: $input-margin-bottom;
    margin-top: $input-margin-top;
    padding-top: $float-input-wrap-padding-top;
    position: relative;
    width: 100%;
  }

  .e-float-input.e-bigger,
  .e-bigger .e-float-input,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper {
    line-height: 1.5;
    margin-bottom: $input-bigger-margin-bottom;
    margin-top: $input-bigger-margin-top;
    padding-top: $float-input-bigger-wrap-padding-top;
    position: relative;
    width: 100%;
  }

  .e-float-input.e-small,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper {
    line-height: 1.35;
    margin-bottom: $input-small-margin-bottom;
    margin-top: $input-small-margin-top;
    padding-top: $float-input-small-wrap-padding-top;
  }

  .e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-float-input.e-small,
  .e-bigger .e-float-input.e-small,
  .e-small .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper.e-bigger {
    line-height: 1.4;
    margin-bottom: $input-small-bigger-margin-bottom;
    margin-top: $input-small-bigger-margin-top;
    padding-top: $float-input-bigger-small-wrap-padding-top;
  }

  .e-input-group.e-bigger,
  .e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper {
    line-height: 1.5;
  }

  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group,
  .e-small .e-input-group.e-control-wrapper,
  .e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-input-group.e-small,
  .e-bigger .e-input-group.e-small,
  .e-small .e-input-group.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-control-wrapper.e-bigger {
    line-height: normal;
  }

  .e-float-input.e-no-float-label,
  .e-float-input.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-no-float-label,
  .e-float-input.e-small.e-no-float-label,
  .e-small .e-float-input.e-no-float-label,
  .e-float-input.e-small.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-small.e-no-float-label,
  .e-small .e-float-input.e-bigger.e-no-float-label,
  .e-float-input.e-control-wrapper.e-no-float-label,
  .e-float-input.e-control-wrapper.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-control-wrapper.e-no-float-label,
  .e-float-input.e-control-wrapper.e-small.e-no-float-label,
  .e-small .e-float-input.e-control-wrapper.e-no-float-label,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-no-float-label,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-no-float-label {
    margin-top: $zero-value;
  }

  .e-float-input,
  .e-float-input.e-control-wrapper,
  .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-disabled {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: normal;
  }

  .e-float-input input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper textarea {
    border: $float-input-border;
    border-width: $float-input-border-width;
    display: block;
    font: inherit;
    width: 100%;
  }

  .e-float-input input,
  .e-float-input.e-control-wrapper input {
    min-width: 0;
    padding: $float-input-padding;
  }

  .e-float-input input,
  .e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-input-group.e-control-wrapper input {
    text-indent: $input-text-indent;
  }

  .e-float-input textarea,
  .e-input-group textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group.e-control-wrapper textarea {
    text-indent: $input-text-indent;
  }

  .e-float-input.e-bigger,
  .e-bigger .e-float-input,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper {
    font-size: $input-bigger-font-size;
  }

  .e-float-input.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-disabled {
    font-size: $input-bigger-font-size;
  }

  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-bigger .e-float-input input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input {
    font: inherit;
    line-height: inherit;
    padding: $float-input-bigger-padding;
  }

  .e-float-input.e-small,
  .e-small .e-float-input,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper {
    font-size: $input-small-font-size;
  }

  .e-float-input.e-small.e-disabled,
  .e-small .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-disabled {
    font-size: $input-small-font-size;
  }

  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small input {
    font: inherit;
    line-height: inherit;
    padding: $float-input-small-padding;
  }

  .e-float-input.e-small.e-bigger,
  .e-small.e-bigger .e-float-input,
  .e-bigger .e-float-input.e-small,
  .e-small .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-float-input.e-control-wrapper,
  .e-bigger .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper.e-bigger {
    font-size: $input-bigger-small-font-size;
  }

  .e-float-input.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-disabled,
  .e-bigger .e-float-input.e-small.e-disabled,
  .e-small .e-float-input.e-bigger.e-disabled,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-disabled,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-float-input.e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-input-group.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-bigger.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled {
    font-size: $input-bigger-small-font-size;
  }

  .e-float-input.e-small.e-bigger input,
  .e-float-input.e-small input.e-bigger,
  .e-bigger .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small input {
    font: inherit;
    line-height: inherit;
    padding: $float-input-bigger-small-padding;
  }

  .e-float-input input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input textarea:focus,
  .e-float-input.e-control-wrapper textarea:focus,
  .e-float-input.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus input {
    outline: none;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text {
    font-family: inherit;
  }

  .e-float-input input:valid ~ label.e-float-text,
  .e-float-input input:focus ~ label.e-float-text,
  .e-float-input input:valid ~ label.e-float-text.e-label-top,
  .e-float-input input ~ label.e-float-text.e-label-top,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top,
  .e-float-input .e-input-in-wrap input ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-float-text.e-label-top,
  .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      font-weight: $input-float-font-weight;
    }
    user-select: text;
  }

  .e-float-input textarea:valid ~ label.e-float-text,
  .e-float-input textarea:focus ~ label.e-float-text,
  .e-float-input textarea:valid ~ label.e-float-text.e-label-top,
  .e-float-input textarea ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-label-top {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
      font-weight: $input-float-font-weight;
    }
    user-select: text;
  }

  .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: -34px;
      width: auto;
    }
  }

  .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: -34px;
      width: auto;
    }
  }
  
  .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: -40px;
      width: auto;
    }
  }

  .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: -40px;
      width: auto;
    }
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-weight: normal;
  }

  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-weight: normal;
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    bottom: 0;
    content: '';
    height: 2px;
    position: absolute;
    transition: .2s ease;
    width: 0;
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before {
    left: 50%;
  }

  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    right: 50%;
  }

  .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::before,
  .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::before,
  .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::after,
  .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::after,
  .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::before,
  .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::after {
    width: 50%;
  }

  .e-float-input .e-float-line,
  .e-float-input.e-control-wrapper .e-float-line {
    display: block;
    position: relative;
    width: 100%;
  }

  .e-float-input.e-rtl,
  .e-float-input.e-control-wrapper.e-rtl {
    direction: rtl;
  }

  .e-float-input.e-rtl label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-rtl .e-float-input label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper label.e-float-text,
  .e-rtl label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper label.e-float-text,
  .e-rtl.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    right: 0;
    transform-origin: right top;
  }

  /* stylelint-disable selector-max-empty-lines */
  .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,

  .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }

  .e-float-input.e-rtl.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,

  .e-float-input.e-bigger.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper.e-bigger.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }

  .e-float-input.e-rtl.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,

  .e-float-input.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }

  .e-float-input.e-rtl.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,

  .e-float-input.e-bigger.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }
  /* stylelint-enable selector-max-empty-lines */
  
  .e-input-group.e-corner.e-rtl .e-input:first-child,
  .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
    border-bottom-left-radius: $zero-value;
    border-bottom-right-radius: $input-box-border-radius;
    border-top-left-radius: $zero-value;
    border-top-right-radius: $input-box-border-radius;
  }

  .e-input-group.e-corner.e-rtl .e-input:last-child,
  .e-input-group.e-corner.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child  {
    border-bottom-left-radius: $input-box-border-radius;
    border-bottom-right-radius: $zero-value;
    border-top-left-radius: $input-box-border-radius;
    border-top-right-radius: $zero-value;
  }

  .e-input-group.e-warning::before,
  .e-input-group.e-control-wrapper.e-warning::before {
    content: '';
  }

  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled {
    background: transparent;
    background-image: none;
    cursor: not-allowed;
    @if $input-skin-name == 'highcontrast' {
      color: $disable;
    }
  }

  .e-input-group.e-corner.e-rtl input.e-input:only-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl input.e-input:only-child {
    border-radius: $input-box-border-radius;
  }

  .e-input-group.e-rtl .e-input:not(:first-child):focus,
  .e-input-group.e-control-wrapper.e-rtl .e-input:not(:first-child):focus {
    border-right-width: $input-right-border-width;
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input {
    min-width: 0;
    width: 100%;
  }

  .e-input-group input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]),
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group.e-control-wrapper textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    border: $input-border;
    border-width: $input-group-border-width;
  }

  .e-input-group input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-bigger .e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input {
    margin-bottom: $zero-value;
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation;
    }
  }

  .e-input-group::before,
  .e-input-group::after,
  .e-input-group.e-control-wrapper::before,
  .e-input-group.e-control-wrapper::after  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-input-group::before,
  .e-input-group.e-control-wrapper::before {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after,
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-width;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-width;
    }
  }

  .e-input-group.e-input-focus::before,
  .e-input-group.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-input-focus::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-width;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-input-group::after,
  .e-input-group.e-control-wrapper::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    position: relative;
    width: 100%;
  }

  .e-input-group .e-input-group-icon:hover,
  .e-input-group.e-rtl.e-corner .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-rtl.e-corner .e-input-group-icon:hover {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'Material3') {
      border-radius: $input-group-border-radius;
    }
  }

  .e-input#{$css}.e-small,
  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small {
    margin-bottom: $input-small-margin-bottom;
  }

  .e-input#{$css}.e-small.e-bigger,
  .e-input-group.e-small.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger .e-input#{$css}.e-small,
  .e-bigger .e-input-group.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small {
    line-height: inherit;
    margin-bottom: $input-small-bigger-margin-bottom;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    margin-bottom: $input-child-margin-bottom;
    margin-right: $input-child-margin-right;
    margin-top: $input-child-margin-top;
  }

  .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' {
      margin-top: $float-input-child-margin-top;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($input-skin-name != 'Material3') {
      margin-bottom: $input-child-bigger-margin-bottom;
      margin-right: $input-child-bigger-margin-right;
      margin-top: $input-child-bigger-margin-top;
    }
    @else {
      margin: $input-child-bigger-margin;
    }
  }

  .e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' {
      margin-top: $float-input-child-bigger-margin-top;
    }
  }

  .e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-small .e-bigger.e-input-group .e-input-group-icon,
  .e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-bigger .e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    margin-bottom: $input-child-small-bigger-margin-bottom;
    margin-right: $input-child-small-bigger-margin-right;
    margin-top: $input-child-small-bigger-margin-top;
  }

  .e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name != 'Material3' {
      margin-top: $float-input-child-small-bigger-margin-top;
    }
  }

  .e-input-group.e-small .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-input-group .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($input-skin-name != 'Material3') {
      margin-bottom: $input-child-small-margin-bottom;
      margin-right: $input-child-small-margin-right;
      margin-top: $input-child-small-margin-top;
    }
    @else {
      margin: $input-child-small-margin;
    }
  }

  .e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' {
      margin-top: $float-input-child-small-margin-top;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-input-group .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-small .e-input-group-icon:last-child,
  .e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-small .e-input-group-icon.e-bigger:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger:last-child,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child,
  .e-bigger .e-input-group.e-small .e-input-group-icon:last-child {
    margin-right: $zero-value;
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $input-group-border-width-focus;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $input-group-border-width-focus;
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom: $input-group-border;
    }
  }

  .e-input-group:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom: $input-group-border;
    }
  }

  .e-input-group:not(.e-float-icon-left),
  .e-input-group.e-success:not(.e-float-icon-left),
  .e-input-group.e-warning:not(.e-float-icon-left),
  .e-input-group.e-error:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
    @if $input-skin-name == 'Material3' {
      padding-top: 1px;
    }
  }

  .e-input-group,
  .e-input-group.e-success,
  .e-input-group.e-warning,
  .e-input-group.e-error,
  .e-input-group.e-control-wrapper,
  .e-input-group.e-control-wrapper.e-success,
  .e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-control-wrapper.e-error {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
  }

  .e-input-group.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus,
  .e-input-group.e-control-wrapper.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus {
    border-right-width: $zero-value;
  }

  .e-input-group.e-input-focus.e-corner,
  .e-input-group.e-control-wrapper.e-input-focus.e-corner {
    border-radius: $input-box-border-radius;
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    background: $input-disable-bg-color;
    color: $input-disable-font-color;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
      background-position: bottom -1px left 0;
      background-repeat: repeat-x;
      background-size: 4px 1px;
      border-bottom-color: transparent;
      color: $input-disable-font-color;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-disabled,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-disabled {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-style: $input-disable-border-type;
    }
  }

  .e-float-custom-tag,
  .e-float-custom-tag.e-control-wrapper {
    display: inline-block;
  }

  .e-float-custom-tag.e-input-group,
  .e-float-custom-tag.e-input-group.e-control-wrapper,
  .e-input-custom-tag,
  .e-input-custom-tag.e-input-group,
  .e-input-custom-tag.e-input-group.e-control-wrapper {
    display: inline-flex;
    vertical-align: middle;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    @include input-ripple-parent;
  }

  .e-input-group:not(.e-filled) .e-input-group-icon::after,
  .e-input-group.e-control-wrapper:not(.e-filled) .e-input-group-icon::after {
    @include input-ripple-style;
  }

  .e-input-group .e-input-group-icon.e-input-btn-ripple::after,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-input-btn-ripple::after {
    @include input-ripple-animation;
  }

    
  input.e-input#{$css}::-ms-clear,
  .e-float-input input::-ms-clear,
  .e-float-input.e-control-wrapper input::-ms-clear {
    display: none;
  }

  input.e-input[type = 'search']::-webkit-search-decoration,
  input.e-input[type = 'search']::-webkit-search-cancel-button,
  input.e-input[type = 'search']::-webkit-search-results-button,
  input.e-input[type = 'search']::-webkit-search-results-decoration,
  .e-float-input input[type = 'search']::-webkit-search-decoration,
  .e-float-input input[type = 'search']::-webkit-search-cancel-button,
  .e-float-input input[type = 'search']::-webkit-search-results-button,
  .e-float-input input[type = 'search']::-webkit-search-results-decoration,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-decoration,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-cancel-button,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-results-button,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  .e-float-input.e-input-group .e-float-line,
  .e-float-input.e-input-group.e-control-wrapper .e-float-line,
  .e-float-input.e-control-wrapper.e-input-group .e-float-line,
  .e-float-input.e-control-wrapper.e-input-group.e-control-wrapper .e-float-line {
    bottom: -1px;
    position: absolute;
  }

  .e-float-input.e-input-group input,
  .e-float-input.e-input-group textarea,
  .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-input-group.e-control-wrapper textarea {
    border: $zero-value;
  }

  .e-float-input.e-input-group input:focus,
  .e-input-group input:focus,
  .e-float-input.e-input-group textarea:focus,
  .e-float-input.e-input-group.e-control-wrapper input:focus,
  .e-float-input.e-input-group.e-control-wrapper textarea {
    @if $input-skin-name == 'tailwind' {
      box-shadow: none;
    }
  }

  .e-float-input.e-input-group .e-float-line,
  .e-float-input.e-input-group .e-float-text,
  .e-float-input.e-input-group.e-control-wrapper .e-float-line,
  .e-float-input.e-input-group.e-control-wrapper .e-float-text  {
    right: $zero-value;
  }

  
  input.e-input#{$css}::-webkit-input-placeholder,
  input.e-input#{$css}:-moz-placeholder,
  input.e-input#{$css}:-ms-input-placeholder,
  input.e-input#{$css}::-moz-placeholder {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  
  textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-input#{$css}::-moz-placeholder {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger input.e-input#{$css}::-webkit-input-placeholder,
  input.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger input.e-input#{$css}:-moz-placeholder,
  input.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger input.e-input#{$css}:-ms-input-placeholder,
  input.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger input.e-input#{$css}::-moz-placeholder,
  input.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-font-size;
    font-style: $input-font-style;
  }

  
  .e-small input.e-input#{$css}::-webkit-input-placeholder,
  input.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small input.e-input#{$css}:-moz-placeholder,
  input.e-small.e-input#{$css}:-moz-placeholder,
  .e-small input.e-input#{$css}:-ms-input-placeholder,
  input.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small input.e-input#{$css}::-moz-placeholder,
  input.e-small.e-input#{$css}::-moz-placeholder {
    font-size: $input-small-font-size;
    font-style: $input-font-style;
  }

  
  .e-small textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-small.e-input#{$css}::-moz-placeholder {
    font-size: $input-small-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger input.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small input.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger input.e-small.e-input#{$css}:-moz-placeholder,
  .e-small input.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger input.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small input.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger input.e-small.e-input#{$css}::-moz-placeholder,
  .e-small input.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger textarea.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger intextareaput.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  input.e-input#{$css}::-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}::-moz-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  input.e-input#{$css}:-ms-input-placeholder {
    font-style: $input-font-style;
  }

  
  textarea.e-input#{$css}:-ms-input-placeholder {
    font-style: $input-font-style;
  }

  
  input.e-input#{$css}::-webkit-input-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  
  textarea.e-input#{$css}::-webkit-input-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  input.e-input#{$css},
  .e-input-group input,
  .e-input-group.e-control-wrapper input,
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-normal-height);
  }

  .e-float-input:not(.e-input-group) input,
  .e-float-input.e-control-wrapper:not(.e-input-group) input {
    @include input-sizing;
    @include input-height ($float-input-normal-height);
  }

  .e-control input.e-input,
  .e-control .e-input-group input,
  .e-control .e-input-group input.e-input,
  .e-control .e-input-group.e-control-wrapper input,
  .e-control .e-input-group.e-control-wrapper input.e-input,
  .e-control .e-float-input input,
  .e-control .e-float-input.e-control-wrapper input,
  .e-control.e-input-group input,
  .e-control.e-input-group input.e-input,
  .e-control.e-input-group.e-control-wrapper input,
  .e-control.e-input-group.e-control-wrapper input.e-input,
  .e-control.e-float-input input,
  .e-control.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-sizing;
    }
  }

  input.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-input-group.e-bigger input,
  .e-input-group.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-bigger input,
  .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-input-group input,
  .e-bigger .e-input-group input.e-input,
  .e-bigger .e-input-group.e-control-wrapper input,
  .e-bigger .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-bigger input,
  .e-float-input.e-bigger input.e-input,
  .e-bigger .e-float-input input,
  .e-bigger .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-bigger-height);
  }

  .e-float-input.e-bigger:not(.e-input-group) input,
  .e-float-input.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-float-input:not(.e-input-group) input,
  .e-bigger .e-float-input:not(.e-input-group) input.e-input,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @include input-sizing;
    @include input-height ($float-input-bigger-height);
  }

  input.e-input.e-small#{$css},
  .e-input-group.e-small input,
  .e-input-group.e-small input.e-input,
  .e-small .e-input-group input,
  .e-small .e-input-group input.e-input,
  .e-input-group.e-control-wrapper.e-small input,
  .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-small .e-input-group.e-control-wrapper input,
  .e-small .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-small input,
  .e-float-input.e-small input.e-input,
  .e-small .e-float-input input,
  .e-small .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper.e-small input.e-input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-small-height);
  }

  .e-float-input.e-small:not(.e-input-group) input,
  .e-float-input.e-small:not(.e-input-group) input.e-input,
  .e-small .e-float-input:not(.e-input-group) input,
  .e-small .e-float-input:not(.e-input-group) input.e-input .e-float-input.e-control-wrapper.e-small:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-group) input.e-input,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input  {
    @include input-sizing;
    @include input-height ($float-input-small-height);
  }

  input.e-input.e-small.e-bigger#{$css},
  .e-input-group.e-bigger.e-small input,
  .e-input-group.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-input-group input,
  .e-bigger.e-small .e-input-group input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-float-input input,
  .e-bigger.e-small .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-bigger-small-height);
  }

  .e-float-input.e-bigger.e-small:not(.e-input-group) input,
  .e-float-input.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-float-input:not(.e-input-group) input,
  .e-bigger.e-small .e-float-input:not(.e-input-group) input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @include input-sizing;
    @include input-height ($float-input-bigger-small-height);
  }

  textarea.e-input#{$css},
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    @include input-sizing;
    @include input-height ($textarea-normal-height);
  }

  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  textarea.e-input.e-bigger#{$css},
  .e-input-group.e-bigger textarea,
  .e-input-group.e-bigger textarea.e-input,
  .e-bigger .e-input-group textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger textarea,
  .e-float-input.e-bigger textarea.e-input,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-float-input.e-control-wrapper textarea.e-input  {
    @include input-sizing;
    @include input-height ($textarea-bigger-height);
  }

  textarea.e-input.e-small#{$css},
  .e-input-group.e-small textarea,
  .e-input-group.e-small textarea.e-input,
  .e-small .e-input-group textarea,
  .e-small .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea,
  .e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-small textarea,
  .e-float-input.e-small textarea.e-input,
  .e-small .e-float-input textarea,
  .e-small .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-float-input.e-control-wrapper textarea,
  .e-small .e-float-input.e-control-wrapper textarea.e-input {
    @include input-sizing;
    @include input-height ($textarea-small-height);
  }

  textarea.e-input.e-small.e-bigger#{$css},
  .e-input-group.e-bigger.e-small textarea,
  .e-input-group.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group textarea,
  .e-bigger.e-small .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger.e-small textarea,
  .e-float-input.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-float-input textarea,
  .e-bigger.e-small .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea.e-input {
    @include input-sizing;
    @include input-height ($textarea-bigger-small-height);
  }

  input.e-input.e-bigger#{$css},
  .e-input-group input.e-input.e-bigger,
  .e-input-group input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-input-group.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-bigger input.e-input#{$css},
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input,
  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-bigger .e-float-input input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input {
    text-indent: $input-bigger-text-indent;
  }

  input.e-input#{$css}.e-small,
  .e-input-group input.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input,
  .e-small input.e-input#{$css},
  .e-small .e-input-group .e-input,
  .e-small .e-input-group.e-control-wrapper .e-input,
  .e-float-input.e-small input,
  .e-float-input input.e-small,
  .e-small .e-float-input input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-small .e-float-input.e-control-wrapper input {
    text-indent: $input-small-text-indent;
  }

  textarea.e-input#{$css}.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input-group textarea.e-input.e-small,
  .e-small input.e-input#{$css},
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-small .e-float-input textarea,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-float-input.e-control-wrapper textarea {
    text-indent: $input-small-text-indent;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input.e-input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input.e-input,
  .e-float-input.e-control-wrapper input,
  .e-input-group input.e-input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input input:focus,
  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-control-wrapper.e-input-focus input,
  .e-float-input.e-input-focus input {
    padding-left: $input-text-indent;
    text-indent: 0;
  }

  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea.e-input,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-float-input.e-control-wrapper textarea:focus,
  .e-float-input textarea:focus {
    padding-left: $input-text-indent;
    text-indent: 0;
  }

  input.e-input.e-rtl#{$css},
  .e-input-group.e-rtl input.e-input,
  .e-input-group.e-control-container.e-rtl input.e-control,
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-float-input.e-rtl input,
  .e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-input-group input.e-input,
  .e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-rtl .e-float-input input,
  .e-rtl .e-float-input.e-control-wrapper input,
  .e-input-group.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-float-input.e-rtl input,
  .e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-input-group input.e-input,
  .e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-rtl .e-float-input input,
  .e-rtl .e-float-input.e-control-wrapper input,
  .e-input-group.e-rtl input.e-input:focus,
  .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-float-input.e-rtl input:focus,
  .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-rtl .e-input-group input.e-input:focus,
  .e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-rtl .e-float-input input:focus,
  .e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-rtl.e-input-focus input,
  .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-rtl .e-float-input.e-input-focus input,
  .e-rtl .e-float-input.e-control-wrapper.e-input-focus input {
    padding-left: 0;
    padding-right: $input-text-indent;
    text-indent: 0;
  }

  textarea.e-input.e-rtl#{$css},
  .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline) textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline) textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-float-input:not(.e-outline).e-rtl textarea:focus,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus {
    padding-right: $input-text-indent;
    text-indent: 0;
  }

  input.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-input-group.e-small input.e-input,
  .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-input-group input.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-float-input input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-input-group input.e-input,
  .e-small .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-small input.e-input:focus,
  .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-float-input.e-small input:focus,
  .e-float-input.e-control-wrapper.e-small input:focus,
  .e-small .e-input-group.e-control-wrapper input.e-input:focus,
  .e-small .e-input-group input.e-input:focus,
  .e-small .e-float-input input:focus,
  .e-small .e-float-input.e-control-wrapper input:focus,
  .e-input-group.e-small.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small .e-input-group.e-input-focus input.e-input,
  .e-float-input.e-small.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus.e-small input,
  .e-small .e-float-input.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-input-focus input {
    padding-left: $input-small-text-indent;
    text-indent: 0;
  }

  textarea.e-input.e-small#{$css},
  .e-small textarea.e-input#{$css},
  .e-input-group.e-small textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-float-input.e-control-wrapper textarea,
  .e-small .e-float-input textarea,
  .e-small .e-input-group textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-float-input.e-small textarea:focus,
  .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-small .e-input-group textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper textarea:focus,
  .e-small .e-float-input textarea:focus {
    padding-left: $input-small-text-indent;
    text-indent: 0;
  }

  .e-rtl input.e-input.e-small#{$css},
  input.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl input.e-input#{$css},
  .e-small input.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-float-input.e-small.e-rtl input,
  .e-input-group.e-small.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-rtl .e-float-input.e-small input,
  .e-rtl .e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-input-group.e-small input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-rtl input.e-small,
  .e-float-input.e-control-wrapper.e-rtl input.e-small,
  .e-input-group.e-rtl input.e-input.e-small,
  .e-input-group.e-control-wrapper.e-rtl input.e-input.e-small,
  .e-rtl .e-float-input input.e-small,
  .e-rtl .e-float-input.e-control-wrapper input.e-small,
  .e-rtl .e-input-group input.e-input.e-small,
  .e-rtl .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-float-input.e-rtl input,
  .e-small .e-float-input.e-control-wrapper.e-rtl input,
  .e-small .e-input-group.e-rtl input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-small.e-rtl .e-float-input.e-control-wrapper input,
  .e-small.e-rtl .e-float-input input,
  .e-small.e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-small.e-rtl .e-input-group input.e-input,
  .e-small.e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-small.e-rtl .e-input-group input.e-input:focus,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-small.e-rtl .e-float-input input:focus,
  .e-small .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-small .e-input-group.e-rtl input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-small .e-float-input.e-rtl input:focus,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-rtl.e-input-focus input {
    padding-left: 0;
    padding-right: $input-small-text-indent;
    text-indent: 0;
  }

  .e-rtl textarea.e-input.e-small#{$css},
  textarea.e-input.e-small.e-rtl#{$css},
  .e-small.e-rtl textarea.e-input#{$css},
  .e-small textarea.e-input.e-rtl#{$css},
  .e-float-input:not(.e-outline).e-small.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea,
  .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea,
  .e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea.e-small,
  .e-float-input:not(.e-outline).e-rtl textarea.e-small,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input.e-small,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input.e-small,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea.e-small,
  .e-rtl .e-float-input:not(.e-outline) textarea.e-small,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input.e-small,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input.e-small,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-small .e-float-input:not(.e-outline).e-rtl textarea,
  .e-small .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-small.e-rtl .e-float-input:not(.e-outline) textarea,
  .e-small.e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-small.e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-small .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus,
  .e-small .e-float-input:not(.e-outline).e-rtl textarea:focus {
    padding-right: $input-small-text-indent;
    text-indent: 0;
  }

  input.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-input-group.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-input-group input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input input,
  .e-bigger .e-input-group.e-control-wrapper input.e-input,
  .e-bigger .e-input-group input.e-input,
  .e-input-group.e-bigger input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-float-input.e-bigger input:focus,
  .e-bigger .e-input-group input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper input:focus,
  .e-bigger .e-float-input input:focus,
  .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-float-input.e-bigger.e-input-focus input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger .e-float-input.e-input-focus input {
    padding-left: $input-bigger-text-indent;
    text-indent: 0;
  }

  .e-rtl input.e-input.e-bigger#{$css},
  input.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl input.e-input#{$css},
  .e-bigger input.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper.e-bigger.e-rtl input,
  .e-float-input.e-bigger.e-rtl input,
  .e-input-group.e-bigger.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input,
  .e-rtl .e-float-input.e-bigger input,
  .e-rtl .e-input-group.e-bigger input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-float-input.e-control-wrapper.e-rtl input.e-bigger,
  .e-float-input.e-rtl input.e-bigger,
  .e-input-group.e-rtl input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-rtl input.e-input.e-bigger,
  .e-rtl .e-float-input.e-control-wrapper input.e-bigger,
  .e-rtl .e-float-input input.e-bigger,
  .e-rtl .e-input-group input.e-input.e-bigger,
  .e-rtl .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input,
  .e-bigger .e-float-input.e-rtl input,
  .e-bigger .e-input-group.e-rtl input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input,
  .e-bigger.e-rtl .e-float-input input,
  .e-bigger.e-rtl .e-input-group input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-bigger.e-rtl .e-input-group input.e-input:focus,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-bigger.e-rtl .e-float-input input:focus,
  .e-bigger .e-input-group.e-rtl input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-bigger .e-float-input.e-rtl input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-bigger.e-rtl .e-input-group.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-input-focus input,
  .e-bigger .e-float-input.e-rtl.e-input-focus input,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl.e-input-focus input {
    padding-left: 0;
    padding-right: $input-bigger-text-indent;
    text-indent: 0;
  }

  textarea.e-input.e-bigger#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-input-group.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-float-input.e-bigger textarea,
  .e-float-input textarea.e-bigger,
  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-bigger textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-float-input.e-bigger textarea:focus,
  .e-bigger .e-input-group textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus,
  .e-bigger .e-float-input textarea:focus {
    padding-left: $input-bigger-text-indent;
    text-indent: 0;
  }

  .e-rtl textarea.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl textarea.e-input#{$css},
  .e-bigger textarea.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper:not(.e-outline).e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-bigger.e-rtl textarea,
  .e-input-group:not(.e-outline).e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-bigger textarea,
  .e-rtl .e-input-group:not(.e-outline).e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea.e-bigger,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea.e-bigger,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input.e-bigger,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input.e-bigger,
  .e-rtl .e-float-input:not(.e-outline) textarea.e-bigger,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea.e-bigger,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input.e-bigger,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-rtl textarea,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-bigger .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-bigger.e-rtl .e-float-input:not(.e-outline) textarea,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-bigger.e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus,
  .e-bigger .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-bigger .e-float-input:not(.e-outline).e-rtl textarea:focus,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus {
    padding-right: $input-bigger-text-indent;
    text-indent: 0;
  }

  input.e-input.e-bigger.e-small#{$css},
  .e-bigger input.e-input.e-small#{$css},
  .e-input-group.e-small.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-input-group.e-small input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger .e-input-group.e-small input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-small.e-bigger input,
  .e-float-input.e-small input.e-bigger,
  .e-bigger .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small input,
  .e-bigger .e-input-group.e-small input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger .e-float-input.e-small input:focus,
  .e-small .e-input-group.e-bigger input.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small .e-float-input.e-bigger input:focus,
  .e-input-group.e-bigger.e-small input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger .e-float-input.e-small.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small .e-float-input.e-bigger.e-input-focus input,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-float-input.e-bigger.e-small.e-input-focus input {
    padding-left: $input-small-bigger-text-indent;
    text-indent: 0;
  }

  .e-bigger input.e-input.e-small.e-rtl#{$css},
  .e-input-group.e-small.e-bigger.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-rtl input.e-input,
  .e-input-group.e-small.e-rtl input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input.e-bigger,
  .e-bigger .e-input-group.e-small.e-rtl input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-float-input.e-small.e-bigger.e-rtl input,
  .e-float-input.e-small.e-rtl input.e-bigger,
  .e-bigger .e-float-input.e-small.e-rtl input,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-rtl input,
  .e-float-input.e-control-wrapper.e-small.e-rtl input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-bigger.e-rtl input.e-input.e-small,
  .e-rtl .e-input-group.e-small.e-bigger input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-rtl .e-input-group.e-small input.e-input.e-bigger,
  .e-rtl .e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger.e-rtl .e-input-group.e-small input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-rtl .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-rtl .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-float-input.e-small.e-bigger input,
  .e-rtl .e-float-input.e-small input.e-bigger,
  .e-bigger.e-rtl .e-float-input.e-small input,
  .e-bigger .e-input-group.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl input:focus,
  .e-bigger .e-float-input.e-small.e-rtl input:focus,
  .e-small .e-input-group.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-rtl input:focus,
  .e-small .e-float-input.e-bigger.e-rtl input:focus,
  .e-input-group.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:focus,
  .e-float-input.e-bigger.e-small.e-rtl input:focus,
  .e-bigger.e-rtl .e-input-group.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger.e-rtl .e-float-input.e-small input:focus,
  .e-small.e-rtl .e-input-group.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small.e-rtl .e-float-input.e-bigger input:focus,
  .e-rtl .e-input-group.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-rtl .e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl.e-input-focus input,
  .e-bigger .e-float-input.e-small.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-bigger.e-rtl.e-input-focus input,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-float-input.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-small.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-bigger.e-input-focus input,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-rtl .e-float-input.e-bigger.e-small.e-input-focus input,
  .e-bigger .e-input-group.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
    padding-left: 0;
    padding-right: $input-small-bigger-text-indent;
    text-indent: 0;
  }

  textarea.e-input.e-bigger.e-small#{$css},
  .e-bigger textarea.e-input.e-small#{$css},
  .e-input-group.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-input-group.e-small textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger .e-input-group.e-small textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-float-input.e-small.e-bigger textarea,
  .e-float-input.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-small textarea,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger .e-input-group.e-small textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger .e-float-input.e-small textarea:focus,
  .e-small .e-input-group.e-bigger textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small .e-float-input.e-bigger textarea:focus,
  .e-input-group.e-bigger.e-small textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-float-input.e-bigger.e-small textarea:focus {
    padding-left: $input-small-bigger-text-indent;
    text-indent: 0;
  }

  .e-bigger .e-input-group.e-small textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger .e-float-input.e-small textarea:focus,
  .e-small .e-input-group.e-bigger textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small .e-float-input.e-bigger textarea:focus,
  .e-input-group.e-bigger.e-small textarea.e-input:focus,
  .e-input-group.e-bigger textarea.e-input:focus,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-float-input.e-bigger.e-small textarea:focus {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .e-bigger textarea.e-input.e-small.e-rtl#{$css},
  .e-input-group:not(.e-outline).e-small.e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input.e-bigger,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input.e-bigger,
  .e-bigger .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-small.e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-small.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea,
  .e-bigger.e-rtl textarea.e-input.e-small#{$css},
  .e-rtl .e-input-group:not(.e-outline).e-small.e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input.e-bigger,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small textarea,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small.e-control-wrapper textarea,
  .e-bigger .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea:focus,
  .e-bigger .e-float-input:not(.e-outline).e-small.e-rtl textarea:focus,
  .e-small .e-input-group:not(.e-outline).e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea:focus,
  .e-small .e-float-input:not(.e-outline).e-bigger.e-rtl textarea:focus,
  .e-input-group:not(.e-outline).e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-small.e-rtl textarea:focus,
  .e-float-input:not(.e-outline).e-bigger.e-small.e-rtl textarea:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small textarea:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger textarea:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-bigger textarea:focus,
  .e-rtl .e-input-group:not(.e-outline).e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-rtl .e-float-input:not(.e-outline).e-bigger.e-small textarea:focus {
    padding-right: $input-small-bigger-text-indent;
    text-indent: 0;
  }
  // Clear-icon support

  .e-float-input .e-clear-icon,
  .e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    background: transparent;
    border: $zero-value;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: $input-clear-icon-position;
    line-height: 1;
    min-width: 24px;
    outline: none;
    padding: $input-clear-icon-padding;
    text-align: center;
  }

  .e-float-input .e-clear-icon::before,
  .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-input-group .e-clear-icon::before,
  .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-clear-icon;
    padding: $zero-value;
    text-align: center;
    vertical-align: middle;
  }

  .e-float-input.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
    display: flex;
  }

  .e-float-input.e-small.e-bigger .e-clear-icon,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon,
  .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon,
  .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon,
  .e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon,
  .e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon {
    padding-bottom: $zero-value;
  }

  .e-float-input.e-small .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-input-group.e-small .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input .e-clear-icon::before,
  .e-small .e-input-group .e-clear-icon::before,
  .e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-small-clear-icon;
  }

  .e-float-input.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-input-group.e-bigger .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input .e-clear-icon::before,
  .e-bigger .e-input-group .e-clear-icon::before,
  .e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-bigger-clear-icon;
  }

  .e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-small.e-bigger .e-float-input .e-clear-icon::before,
  .e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-small.e-bigger .e-input-group .e-clear-icon::before,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
  .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    font-size: $input-bigger-small-clear-icon;
  }

  .e-input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-input-group input:not(.e-control).e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input.e-input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input:not(:valid):not(.e-control):first-child ~ .e-clear-icon {
    display: none;
  }

  .e-input-group .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
    display: none;
  }

  .e-input-group.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
  }

  .e-input-group.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-disabled .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon.e-clear-icon-hide {
    cursor: not-allowed;
  }

  .e-float-input.e-control-wrapper input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-input-group input[readonly]:first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input[readonly]:first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input[readonly]:first-child .e-clear-icon.e-clear-icon-hide  {
    cursor: auto;
  }

  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    min-height: $input-clear-icon-min-height;
    min-width: $input-clear-icon-min-width;
    @if $input-skin-name != 'Material3' {
      padding-bottom: $input-clear-icon-padding-bottom;
      padding-left: $input-clear-icon-padding-left;
      padding-right: $input-clear-icon-padding-right;
      padding-top: $input-clear-icon-padding-top;
    }
    @else {
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-clear-icon-hover-border-radius;
    }
  }

  .e-float-input.e-input-group .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      padding-right: $input-clear-icon-padding-right;
      padding-top: $float-input-clear-icon-padding-top;
    }
  }

  .e-input-group.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-input-group .e-clear-icon.e-bigger,
  .e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-input-group .e-clear-icon,
  .e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
    min-width: $input-bigger-clear-icon-min-width;
    @if $input-skin-name != 'Material3' {
      min-height: $input-bigger-clear-icon-min-height;
      padding-bottom: $input-clear-icon-bigger-padding-bottom;
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $input-clear-icon-bigger-padding-top;
    }
    @else {
      min-height: $input-bigger-clear-icon-min-height;
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-bigger-clear-icon-border-radius;
    }
  }

  .e-input-group.e-float-input.e-bigger .e-clear-icon,
  .e-input-group.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $float-input-clear-icon-bigger-padding-top;
    }
  }

  .e-input-group.e-small .e-clear-icon,
  .e-input-group .e-clear-icon.e-small,
  .e-small.e-bigger .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      min-height: $input-bigger-clear-icon-min-height;
      min-width: $input-bigger-clear-icon-min-width;
      padding-bottom: $input-clear-icon-bigger-padding-bottom;
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $input-clear-icon-bigger-padding-top;
    }
    @else {
      min-height: $input-bigger-small-clear-icon-min-height;
      min-width: $input-bigger-small-clear-icon-min-width;
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-bigger-clear-icon-border-radius;
    }
  }

  .e-input-group.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-clear-icon {
    min-height: $input-bigger-small-clear-icon-min-height;
    min-width: $input-bigger-small-clear-icon-min-width;
    @if $input-skin-name != 'Material3' {
      padding-bottom: $input-clear-icon-small-bigger-padding-bottom;
      padding-right: $input-clear-icon-small-bigger-padding-right;
      padding-top: $input-clear-icon-small-bigger-padding-top;
    }
  }

  .e-input-group.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      padding-right: $input-clear-icon-small-bigger-padding-right;
      padding-top: $float-input-clear-icon-small-bigger-padding-top;
    }
  }

  .e-input-group.e-small .e-clear-icon,
  .e-input-group .e-clear-icon.e-small,
  .e-small .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper .e-clear-icon {
    min-height: $input-small-clear-icon-min-height;
    min-width: $input-small-clear-icon-min-width;
    @if $input-skin-name != 'Material3' {
      padding-bottom: $input-clear-icon-small-padding-bottom;
      padding-right: $input-clear-icon-small-padding-right;
      padding-top: $input-clear-icon-small-padding-top;
    }
    @else {
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-small-clear-icon-border-radius;
    }
  }

  .e-input-group.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-float-input .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper.e-float-input .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-input-group.e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name != 'Material3' {
      padding-right: $input-clear-icon-small-padding-right;
      padding-top: $float-input-clear-icon-small-padding-top;
    }
  }

  .e-input#{$css}:not(:valid),
  .e-input#{$css}:valid,
  .e-float-input.e-control-wrapper input:not(:valid),
  .e-float-input.e-control-wrapper input:valid,
  .e-float-input input:not(:valid),
  .e-float-input input:valid,
  .e-input-group input:not(:valid),
  .e-input-group input:valid,
  .e-input-group.e-control-wrapper input:not(:valid),
  .e-input-group.e-control-wrapper input:valid,
  .e-float-input.e-control-wrapper textarea:not(:valid),
  .e-float-input.e-control-wrapper textarea:valid,
  .e-float-input textarea:not(:valid),
  .e-float-input textarea:valid,
  .e-input-group.e-control-wrapper textarea:not(:valid),
  .e-input-group.e-control-wrapper textarea:valid,
  .e-input-group textarea:not(:valid),
  .e-input-group textarea:valid {
    box-shadow: none;
  }

  // Left side icon with floating label issue

  .e-input-group .e-input-in-wrap,
  .e-input-group.e-control-wrapper .e-input-in-wrap,
  .e-float-input .e-input-in-wrap,
  .e-float-input.e-control-wrapper .e-input-in-wrap {
    width: 100%;
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      display: flex;
      position: relative;
    }
  }

  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text {
    right: 0;
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
    }
  }

  .e-input-group .e-input-in-wrap,
  .e-input-group.e-control-wrapper .e-input-in-wrap,
  .e-float-input .e-input-in-wrap,
  .e-float-input.e-control-wrapper .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      display: flex;
      position: relative;
      width: 100%;
    }
  }

  .e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
      margin-left: $input-inner-wrap-margin-left;
    }
  }

  .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap .e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $input-inner-wrap-margin-left;
    }
  }

  // Double border issue while adding floating input with class .e-input
  .e-float-input input.e-input,
  .e-float-input.e-bigger .e-input,
  .e-bigger .e-float-input .e-input,
  .e-float-input.e-control-wrapper input.e-input,
  .e-float-input.e-control-wrapper.e-bigger .e-input,
  .e-bigger .e-float-input.e-control-wrapper .e-input  {
    margin-bottom: $zero-value;
  }

  .e-float-input label.e-float-text.e-label-bottom,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 16px, 0) scale(1);
    }
  }

  // textarea floating label support.

  .e-float-input textarea:focus ~ label.e-float-text,
  .e-float-input textarea:valid ~ label.e-float-text,
  .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -22px;
      transform: translate3d(0, 6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or  $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      top: 15px;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if $input-skin-name == 'tailwind' {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -20px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
      top: 14px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 12px;
    }
  }

  .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -21px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      top: 16px;
    }
  }

  .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -20px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
      top: 16px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 15px;
    }
  }

  // Floating label on the top of the textarea
  .e-float-input textarea ~ .e-float-text,
  .e-float-input.e-control-wrapper textarea ~ .e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -11px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
      top: 15px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: 13px;
    }
  }

  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -11px;
    }
  }

  .e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-float-text,
  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
      top: 18px;
    }
    @else if $input-skin-name == 'tailwind' {
      top: -11px;
    }
  }

  .e-float-input.e-small textarea ~ label.e-float-text,
  .e-float-input textarea ~ label.e-float-text.e-small,
  .e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-float-input textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -11px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      top: 15px;
    }
  }

  .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-input-group:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-float-input.e-bigger input,
  .e-bigger .e-float-input input,
  .e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-input-group input,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' {
      min-height: 27px;
    }
    @if $input-skin-name == 'Material3' {
      min-height: 28px;
    }
  }

  .e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-input-group:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-float-input.e-small input,
  .e-small .e-float-input input,
  .e-float-input.e-input-group.e-small input,
  .e-small .e-float-input.e-input-group input,
  .e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' {
      min-height: 16px;
    }
    @if $input-skin-name == 'Material3' {
      min-height: 14px;
    }
  }

  .e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-float-input.e-bigger.e-small input,
  .e-bigger .e-float-input.e-small input,
  .e-small .e-float-input.e-bigger input,
  .e-float-input.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-input-group.e-small input,
  .e-small .e-float-input.e-input-group.e-bigger input,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group.e-bigger input  {
    @if $input-skin-name == 'material' {
      min-height: 28px;
    }
    @if $input-skin-name == 'Material3' {
      min-height: 26px;
    }
  }

  .e-input-group input.e-input,
  .e-float-input.e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: 22px;
    }
  }

  .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-width: $input-group-border-width-hover;
    }
  }

  .e-input-group:hover:not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-disabled),
  .e-float-input:hover:not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-disabled),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-width: $input-group-border-width-hover;
    }
  }

  .e-input-group.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-width: $input-group-border-width-hover;
    }
  }

  .e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-input-group.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      bottom: -2px;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $zero-value $zero-value 1px;
    }
  }

  .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
    user-select: text;
  }

  .e-small .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -38px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input.e-small:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      font-weight: bold;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      @include textarea-float-label-alignment;
      font-style: $input-font-style;
    }
  }

  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
    }
    font-style: $input-font-style;
  }

  .e-float-input.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 16px, 0) scale(1);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or  $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      transform: translate3d(0, 16px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      padding-right: 0;
      transform: translate3d(0, 16px, 0) scale(1);
    }
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-font-size;
    font-style: $input-font-style;
    font-weight: normal;
    left: 0;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: -11px;
    transform: translate3d(0, 16px, 0) scale(1);
    transform-origin: left top;
    transition: .25s cubic-bezier(.25, .8, .25, 1);
    user-select: none;
    white-space: nowrap;
    width: 100%;
  }

  
  textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-ms-textarea-placeholder,
  textarea.e-input#{$css}::-moz-placeholder {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  
  .e-small textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-small.e-input#{$css}::-webkit-textarea-placeholder,
  .e-small textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-small.e-input#{$css}::-moz-placeholder {
    font-size: $input-small-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger textarea.e-small.e-input#{$css}::-webkit-textarea-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-webkit-textarea-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  
  .e-bigger textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-bigger.e-input#{$css}::-webkit-textarea-placeholder,
  .e-bigger textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-input#{$css}:-ms-textarea-placeholder,
  textarea.e-bigger.e-input#{$css}:-ms-textarea-placeholder,
  .e-bigger textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-font-size;
    font-style: $input-font-style;
  }

  .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -9px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind'  or $input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-small .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 17px;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -10px;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }

    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 16px;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: -8px;
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      top: 14px;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
  }

  .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger.e-small .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input textarea:focus ~ label.e-float-text,
  .e-small .e-float-input textarea:valid ~ label.e-float-text,
  .e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -31px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5') {
      font-weight: 500;
      padding-right: 0;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: 0;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
  }

  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-disable-border-color;
      border-style: $input-disable-border-type;
    }
  }

  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-disabled textarea,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled textarea {
    filter: alpha(opacity=$input-opacity-filter);
    opacity: $input-opacity;
  }

  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled {
    background: transparent;
    background-image: none;
    cursor: not-allowed;
    @if $input-skin-name == 'highcontrast' {
      color: $disable;
    }
  }

  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea,
  .e-float-input.e-input-group textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-float-input.e-control-wrapper.e-input-group textarea {
    border-radius: $input-box-border-radius;
  }

  textarea.e-input#{$css},
  .e-input-group textarea,
  .e-input-group textarea.e-input,
  .e-input-group.e-input-focus textarea,
  .e-input-group.e-input-focus textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    line-height: 1.5;
    min-height: $textarea-min-height;
    min-width: 0;
    padding: $textarea-padding;
    resize: vertical;
  }

  .e-input-group.e-bigger textarea,
  .e-input-group.e-bigger textarea.e-input,
  .e-input-group textarea.e-bigger,
  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-input-group textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger textarea,
  .e-float-input textarea.e-bigger,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-float-input.e-control-wrapper textarea {
    font: inherit;
    line-height: 1.5;
    min-height: $textarea-bigger-min-height;
    padding: $textarea-bigger-padding;
  }

  .e-input-group.e-input-focus.e-bigger textarea,
  .e-input-group.e-input-focus.e-bigger textarea.e-input,
  .e-input-group.e-input-focus textarea.e-bigger,
  .e-input-group.e-input-focus textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-bigger .e-input-group.e-input-focus textarea,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-bigger:focus,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
    font: inherit;
    line-height: 1.5;
    min-height: $textarea-bigger-min-height;
    padding: $textarea-bigger-padding;
  }

  .e-input-group.e-small textarea,
  .e-input-group.e-small textarea.e-input,
  .e-input-group textarea.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper.e-small textarea,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-input-group textarea,
  .e-small .e-input-group textarea.e-input,
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-float-input textarea,
  .e-small .e-float-input.e-control-wrapper textarea {
    font: inherit;
    min-height: $textarea-small-min-height;
    padding: $textarea-small-padding;
  }

  .e-input-group.e-input-focus.e-small textarea,
  .e-input-group.e-input-focus.e-small textarea.e-input,
  .e-input-group.e-input-focus textarea.e-small,
  .e-input-group.e-input-focus textarea.e-input.e-small,
  .e-input-group.e-input-focus textarea.e-input.e-small,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-small .e-input-group.e-input-focus textarea,
  .e-small .e-input-group.e-input-focus textarea.e-input {
    font: inherit;
    min-height: $textarea-small-min-height;
    padding: $textarea-small-padding;
  }

  .e-input-group.e-small textarea:focus,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group textarea.e-small:focus,
  .e-input-group textarea.e-input.e-small:focus,
  .e-input-group.e-control-wrapper.e-small textarea:focus,
  .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-small .e-input-group textarea:focus,
  .e-small .e-input-group textarea.e-input:focus,
  .e-float-input.e-small textarea:focus,
  .e-float-input textarea.e-small:focus,
  .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-float-input.e-control-wrapper textarea.e-small:focus,
  .e-small .e-float-input textarea:focus,
  .e-small .e-float-input.e-control-wrapper textarea:focus {
    padding: $textarea-small-padding;
  }

  .e-input-group.e-small.e-bigger textarea.e-input,
  .e-input-group.e-small textarea.e-input.e-bigger,
  .e-input-group textarea.e-input.e-bigger.e-small,
  .e-input-group.e-bigger textarea.e-small,
  .e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-input-group textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-bigger .input-group textarea.e-small,
  .e-bigger .e-input-group.e-small textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-small.e-input-group.e-control-wrapper textarea.e-input,
  .e-small .input-group textarea.e-bigger,
  .e-small .e-input-group.e-bigger textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-float-input textarea.e-bigger.e-small,
  .e-float-input.e-small.e-bigger textarea,
  .e-float-input.e-small textarea.e-bigger,
  .e-float-input.e-bigger textarea.e-small,
  .e-bigger .e-float-input.e-small textarea,
  .e-bigger.e-small .e-float-input textarea,
  .e-bigger .float-input textarea.e-small,
  .e-small .e-float-input.e-bigger textarea,
  .e-small .float-input textarea.e-bigger,
  .e-small .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-small.e-float-input.e-control-wrapper textarea {
    font: inherit;
    line-height: 1.5;
    min-height: $textarea-bigger-small-min-height;
    padding: $textarea-bigger-small-padding;
  }

  .e-input-group.e-input-focus textarea.e-input.e-bigger.e-small,
  .e-input-group.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-input-group.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-input-group.e-input-focus.e-bigger textarea.e-small,
  .e-input-group.e-control-wrapper.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
    font: inherit;
    line-height: 1.5;
    min-height: $textarea-bigger-small-min-height;
    padding: $textarea-bigger-small-padding;
  }

  input.e-input.e-small#{$css},
  textarea.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-small textarea.e-input #{$css} {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $input-smaller-min-height;
    }
  }

  input.e-input#{$css},
  textarea.e-input#{$css} {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $input-min-height;
    }
  }

  .e-bigger input.e-input,
  .e-bigger textarea.e-input,
  input.e-input.e-bigger,
  textarea.e-input.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $input-bigger-min-height;
    }
  }

  .e-bigger input.e-input.e-small,
  .e-bigger .e-small input.e-input,
  .e-bigger.e-small input.e-input,
  .e-small input.e-input.e-bigger,
  input.e-input.e-bigger.e-small,
  .e-small .e-bigger input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $input-bigger-smaller-min-height;
    }
  }

  // Outline textbox

  textarea.e-outline.e-input,
  .e-outline.e-input-group textarea.e-input,
  .e-outline.e-input-group textarea,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper textarea,
  .e-outline.e-float-input textarea.e-input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 1px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 80px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 45px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 75px);
    }
  }
  
  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 110px);
    }
  }

  .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: 0%;
    }
  }

  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-input-group,
  .e-outline.e-input-group:not(.e-float-icon-left),
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper,
  .e-outline.e-input-group:not(.e-float-icon-left),
  .e-outline.e-input-group.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-error:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: 1px solid $outline-border-color;
      border-radius: 4px;
      border-width: 1px;
      fill: transparent;
      transition: border .2s, box-shadow .2s;
    }
  }

  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $zero-value;
    }
  }

  .e-outline.e-float-input.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left):not(.e-disabled),
  .e-outline.e-float-input.e-input-group.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-input-group,
  .e-outline .e-input-group,
  .e-outline .e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-font-size;
    }
  }

  input.e-input.e-bigger.e-outline,
  textarea.e-input.e-bigger.e-outline,
  .e-outline.e-bigger input.e-input,
  .e-outline.e-bigger textarea.e-input,
  .e-outline.e-input-group.e-bigger,
  .e-bigger .e-input-group.e-outline,
  .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-input-font-size;
    }
  }

  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-outline.e-input-group.e-bigger.e-disabled .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-disabled .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-input-icon-font-size;
    }
  }

  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-width: $outline-active-input-border;
    }
  }

  input.e-outline.e-input,
  .e-outline.e-input-group input.e-input,
  .e-outline.e-input-group input,
  .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input input.e-input,
  .e-outline.e-float-input input,
  .e-outline.e-float-input.e-control-wrapper input.e-input,
  .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-input-group:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      padding: $outline-input-padding-top $outline-input-padding-left $outline-input-padding-bottom;
    }
  }

  textarea.e-outline.e-input,
  .e-outline.e-input-group textarea.e-input,
  .e-outline.e-input-group textarea,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper textarea,
  .e-outline.e-float-input textarea.e-input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea,
  .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      margin: $outline-textarea-margin-top;
      padding: $zero-value $outline-input-padding-left $outline-input-padding-left;
    }
  }

  .e-outline.e-input-group input.e-input,
  .e-outline.e-float-input.e-input-group input,
  .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input input,
  .e-outline.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-input-min-height;
    }
  }

  .e-outline.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-outline.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-outline.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-outline.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-outline.e-float-input:not(.e-input-group) .e-float-line::before,
  .e-outline.e-float-input:not(.e-input-group) .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      content: none;
    }
  }

  .e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-active-border-color;
      box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
    }
  }

  .e-outline.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-border-width;
      border-width: $input-group-border-width;
      margin-left: $zero-value;
    }
  }

  .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: 4px;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: 4px;
      margin-left: $zero-value;
    }
  }

  .e-outline.e-float-input .e-clear-icon,
  .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-input-clear-icon-font-size;
      padding: 9px $outline-input-icon-margin-right 9px $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-input-clear-icon-font-size;
      padding: $zero-value;
      height: 32px;
      margin: 4px;
    }
  }

  .e-outline.e-input-group.e-float-icon-left .e-input,
  .e-outline.e-float-input.e-input-group.e-float-icon-left .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $zero-value;
    }
  }

  .e-outline.e-input-group .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-icon-font-size;
      margin: 9px $outline-input-icon-margin-right 9px $zero-value;
    }
  }

  .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-icon-font-size;
      margin: 9px $zero-value 9px $outline-input-icon-margin-right;
    }
  }

  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $zero-value;
    }
  }

  .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
    }
  }

  .e-outline.e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-small input,
  .e-small .e-outline.e-float-input input,
  .e-outline.e-float-input.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-input-group input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-small-input-min-height;
    }
  }

  .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-label-font-size;
    }
  }

  .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-label-font-size;
    }
  }

  .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-valid-input-font-size;
    }
  }

  .e-outline.e-input-group.e-bigger,
  .e-bigger .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-bigger,
  .e-bigger .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-input-font-size;
    }
  }

  .e-outline.e-input-group.e-small,
  .e-small .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-small,
  .e-small .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-small,
  .e-small .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-small,
  .e-small .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-input-font-size;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger,
  .e-small .e-outline.e-input-group.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small,
  .e-bigger.e-small .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small,
  .e-bigger.e-small .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-small.e-bigger,
  .e-small .e-outline.e-float-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small,
  .e-bigger.e-small .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-input-font-size;
    }
  }

  .e-small.e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-label-font-size;
    }
  }

  input.e-input.e-small.e-outline,
  .e-small input.e-input.e-outline,
  .e-input-group.e-small.e-outline input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-outline.e-float-input.e-small input,
  .e-outline.e-float-input.e-control-wrapper input.e-small,
  .e-outline.e-float-input.e-small input,
  .e-outline.e-float-input.e-control-wrapper input.e-small,
  .e-outline.e-input-group input.e-input.e-small,
  .e-outline.e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-outline.e-float-input input,
  .e-small .e-outline.e-float-input.e-control-wrapper input,
  .e-small .e-outline.e-input-group input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-input-group.e-small input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-outline.e-float-input.e-small input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-small input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper input.e-input:focus,
  .e-small .e-outline.e-input-group input.e-input:focus,
  .e-small .e-outline.e-float-input input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper input:focus,
  .e-outline.e-float-input.e-small.e-input-focus input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-small .e-outline.e-float-input.e-input-focus input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-focus input,
  .e-outline.e-input-group.e-small.e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-small-input-padding-top $outline-small-input-padding-left;
    }
  }

  textarea.e-input.e-small.e-outline,
  .e-small textarea.e-input.e-outline,
  .e-input-group.e-small.e-outline textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea.e-small,
  .e-outline.e-float-input.e-small textarea,
  .e-outline.e-input-group textarea.e-input.e-small,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-outline.e-float-input textarea,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea,
  .e-small .e-outline.e-input-group textarea.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-small textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-outline.e-float-input.e-small textarea:focus,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-small .e-outline.e-input-group textarea.e-input:focus,
  .e-small .e-outline.e-float-input textarea:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      margin: $outline-small-textarea-margin-top;
      padding: $zero-value $outline-small-input-padding-left $outline-small-input-padding-left;
    }
  }

  .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-input-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-outline.e-input-group .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-input-icon-margin-left;
    }
  }

  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-small .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon.e-small,
  .e-small .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-small-clear-icon-font-size;
      padding: 7px $outline-small-input-icon-margin-left 7px $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-small-clear-icon-font-size;
    }
  }

  .e-outline.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-bigger input,
  .e-bigger .e-outline.e-float-input input,
  .e-outline.e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-input-group input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-bigger-input-min-height;
    }
  }

  .e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group .e-clear-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-bigger-clear-icon-font-size;
      padding: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left $outline-bigger-input-icon-padding $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-bigger-clear-icon-font-size;
      margin: 8px;
      padding: $zero-value;
    }
  }

  .e-outline.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-bigger-input-icon-margin-right;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-bigger-input-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left  $outline-bigger-input-icon-padding $zero-value;
    }
  }

  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
    }
  }

  input.e-input.e-bigger.e-outline,
  .e-bigger input.e-input.e-outline,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input.e-bigger,
  .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input:not(.e-float-icon-left) input.e-bigger,
  .e-outline.e-input-group:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-bigger-input-padding-top $outline-bigger-input-padding-left;
    }
  }

  textarea.e-input.e-bigger.e-outline,
  .e-bigger textarea.e-input.e-outline,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) textarea.e-bigger,
  .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input:not(.e-float-icon-left) textarea.e-bigger,
  .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-textarea-maring-top;
      padding: $zero-value $outline-bigger-input-padding-left $outline-bigger-input-padding-left;
    }
  }

  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-small input,
  .e-small .e-outline.e-float-input.e-bigger input,
  .e-outline.e-float-input.e-input-group.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-bigger input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-small-bigger-input-min-height;
    }
  }

  input.e-input.e-bigger.e-small.e-outline,
  .e-bigger input.e-input.e-small.e-outline,
  .e-outline.e-input-group.e-small.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-small:not(.e-float-icon-left) input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) input:focus,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input:focus,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) input:focus,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-small-bigger-input-margin-top $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-bottom;
    }
  }

  textarea.e-input.e-bigger.e-small.e-outline,
  .e-bigger textarea.e-input.e-small.e-outline,
  .e-outline.e-input-group.e-small.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea:focus,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      margin: $outline-bigger-textarea-maring-top;
      padding: $zero-value $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-left;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-clear-icon-font-size;
      padding: 9px $outline-small-bigger-icon-margin-left 9px $zero-value;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-bigger-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-small-group-icon-top $outline-small-bigger-icon-margin-left $outline-bigger-small-group-icon-bottom $zero-value;
    }
  }

  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
    }
  }

  .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $outline-bigger-small-group-icon-top;
    }
  }

  .e-outline.e-float-input input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $outline-input-border;
      border-width: $outline-input-group-border-width;
    }
  }

  .e-outline label.e-float-text,
  .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      display: flex;
      left: $zero-value;
      line-height: $outline-label-default-line-height;
      position: absolute;
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
      transition: color .2s, font-size .2s, line-height .2s;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-bigger-label-line-height;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-bigger-label-line-height;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-bigger-label-line-height;
    }
  }

  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-small-label-line-height;
    }
  }

  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-label-line-height;
    }
  }

  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-label-line-height;
    }
  }

  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-label-line-height;
    }
  }

  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-label-line-height;
    }
  }

  .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-label-line-height;
    }
  }

  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-small-bigger-label-line-height;
    }
  }

  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-bigger-label-line-height;
    }
  }

  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-bigger-label-line-height;
    }
  }

  .e-outline label.e-float-text::before,
  .e-outline label.e-float-text::after,
  .e-outline.e-float-input label.e-float-text::before,
  .e-outline.e-float-input label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top: solid $outline-wrapper-border-infocused;
      border-top-color: transparent;
      box-shadow: inset $zero-value 1px transparent;
      box-sizing: border-box;
      content: ' ';
      display: block;
      height: $outline-label-height;
      margin-top: $outline-label-before-element-margin-top;
      min-width: $outline-label-min-width;
      pointer-events: none;
      position: relative;
      transition: border-color .1s, box-shadow .2s;
    }
  }

  .e-outline.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-icon-left label.e-float-text::after,
  .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transition: none;
    }
  }

  .e-bigger.e-outline label.e-float-text::before,
  .e-bigger.e-outline label.e-float-text::after,
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-bigger .e-outline label.e-float-text::before,
  .e-bigger .e-outline label.e-float-text::after,
  .e-bigger .e-outline.e-float-input label.e-float-text::before,
  .e-bigger .e-outline.e-float-input label.e-float-text::after,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-bigger-label-min-width;
    }
  }

  .e-small.e-outline label.e-float-text::before,
  .e-small.e-outline label.e-float-text::after,
  .e-small.e-outline.e-float-input label.e-float-text::before,
  .e-small.e-outline.e-float-input label.e-float-text::after,
  .e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-small .e-outline label.e-float-text::before,
  .e-small .e-outline label.e-float-text::after,
  .e-small .e-outline.e-float-input label.e-float-text::before,
  .e-small .e-outline.e-float-input label.e-float-text::after,
  .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-small-label-min-width;
    }
  }

  .e-bigger.e-small.e-outline label.e-float-text::before,
  .e-bigger.e-small.e-outline label.e-float-text::after,
  .e-bigger.e-small.e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-small.e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-bigger.e-small .e-outline label.e-float-text::before,
  .e-bigger.e-small .e-outline label.e-float-text::after,
  .e-bigger.e-small .e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-small .e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-bigger-small-label-min-width;
    }
  }

  .e-outline.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $outline-border-color;
      border-width: 1px;
    }
  }

  .e-outline.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-success-color;
    }
  }

  .e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-success-color;
    }
  }

  .e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-error-color;
    }
  }

  .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-error-color;
    }
  }

  .e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-warning-color;
    }
  }

  .e-outline.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
  .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-warning-color;
    }
  }

  .e-outline label.e-float-text::before,
  .e-outline.e-float-input label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-left: solid 1px transparent;
      border-radius: $outline-label-margin $zero-value;
      left: $outline-label-before-left;
      margin-right: $outline-label-margin;
    }
  }

  .e-rtl.e-outline label.e-float-text::before,
  .e-rtl.e-outline.e-float-input label.e-float-text::before,
  .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-left: $zero-value;
      border-radius: $zero-value $outline-label-margin;
      left: $outline-label-before-left-rtl;
    }
  }

  .e-rtl.e-outline label.e-float-text::after,
  .e-rtl.e-outline.e-float-input label.e-float-text::after,
  .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-radius: $outline-label-border-radius $zero-value;
      border-right: $zero-value;
      left: $outline-label-after-left-rtl;
    }
  }

  .e-outline label.e-float-text::after,
  .e-outline.e-float-input label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-radius: $zero-value $outline-label-border-radius;
      border-right: solid 1px transparent;
      flex-grow: 1;
      left: $outline-label-after-left;
      margin-left: $outline-label-margin;
    }
  }

  .e-outline.e-input-focus label.e-float-text::before,
  .e-outline.e-input-focus label.e-float-text::after,
  .e-outline.e-float-input.e-input-focus label.e-float-text::before,
  .e-outline.e-float-input.e-input-focus label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-active-border-color;
    }
  }

  .e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
      box-shadow: inset 1px $zero-value $input-active-border-color, inset -1px $zero-value $input-active-border-color, inset $zero-value -1px $input-active-border-color;
    }
  }

  .e-outline.e-float-input input:focus ~ label.e-float-text,
  .e-outline.e-float-input input:valid ~ label.e-float-text,
  .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-outline.e-float-input textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-floating-label-font-size;
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
  }

  .e-outline.e-float-input.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-float-input .e-clear-icon,
  .e-outline.e-float-input.e-control-wrapper.e-rtl .e-clear-icon,
  e-rtl .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
  .e-outline.e-input-group.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-input-icon-margin-right;
      padding-right: $outline-input-icon-margin-left;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
    }
  }

  .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl .e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
      margin-right: $outline-input-icon-margin-left;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-outline.e-input-group .e-clear-icon.e-small,
  .e-rtl .e-outline.e-input-group .e-clear-icon.e-small,
  .e-rtl.e-small .e-outline.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-outline.e-input-group .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-small-input-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-small .e-outline.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon .e-rtl .e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group .e-clear-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-bigger-input-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-bigger-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-bigger-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-small-bigger-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
      margin-right: $zero-value;
    }
  }

  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-bigger-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-bigger-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-small .e-outline.e-float-input label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .e-outline.e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-label-font-size;
    }
  }

  .e-outline.e-float-input textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
  }

  .e-outline textarea,
  textarea.e-outline,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea,
  .e-outline.e-float-input.e-input-group textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) textarea:focus ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-label-font-color-with-value;
    }
  }

  .e-rtl.e-outline.e-float-input.e-small textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input textarea ~ label.e-float-text.e-small,
  .e-rtl.e-outline.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-rtl.e-outline.e-float-input textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-rtl.e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
    }
  }

  .e-outline.e-float-input.e-small .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-outline.e-input-group.e-small .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input .e-clear-icon::before,
  .e-outline.e-small .e-input-group .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-small-clear-icon;
    }
  }

  .e-outline.e-float-input .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-input-group .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-clear-icon;
    }
  }

  .e-outline.e-float-input.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-bigger-clear-icon;
    }
  }

  .e-outline.e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-bigger-small-clear-icon;
    }
  }

  // Float label font size configuration

  .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .e-outline label.e-float-text,
  .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-bigger .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .e-small .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-small .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-bigger .e-outline.e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-bigger label.e-float-text,
  .e-outline.e-float-input label.e-float-text.e-bigger,
  .e-outline.e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-small,
  .e-outline.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  // Filled Input

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper,
  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper {
    line-height: 1;
  }

  // Filled Input box sizing configuration

  .e-filled input.e-input#{$css},
  .e-filled.e-input-group input,
  .e-filled.e-input-group.e-control-wrapper input,
  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-float-input:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-control .e-filled input.e-input,
  .e-control .e-filled.e-input-group input,
  .e-control .e-filled.e-input-group input.e-input,
  .e-control .e-filled.e-input-group.e-control-wrapper input,
  .e-control .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-control .e-filled.e-float-input input,
  .e-control .e-filled.e-float-input.e-control-wrapper input,
  .e-control.e-filled.e-input-group input,
  .e-control.e-filled.e-input-group input.e-input,
  .e-control.e-filled.e-input-group.e-control-wrapper input,
  .e-control.e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-control.e-filled.e-float-input input,
  .e-control.e-filled.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled input.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger input,
  .e-filled.e-input-group.e-bigger input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-filled.e-input-group input,
  .e-bigger .e-filled.e-input-group input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input.e-bigger input.e-input,
  .e-bigger .e-filled.e-float-input input,
  .e-bigger .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-input-group) input,
  .e-filled.e-float-input.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-filled.e-float-input:not(.e-input-group) input,
  .e-bigger .e-filled.e-float-input:not(.e-input-group) input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled input.e-input.e-small#{$css},
  .e-filled.e-input-group.e-small input,
  .e-filled.e-input-group.e-small input.e-input,
  .e-small .e-filled.e-input-group input,
  .e-small .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small input,
  .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper input,
  .e-small .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-small input.e-input,
  .e-small .e-filled.e-float-input input,
  .e-small .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small input.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-small .e-filled.e-float-input.e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-float-input.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-small:not(.e-input-group) input.e-input,
  .e-small .e-filled.e-float-input:not(.e-input-group) input,
  .e-small .e-filled.e-float-input:not(.e-input-group) input.e-input .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-group) input.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled input.e-input.e-small.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger.e-small input,
  .e-filled.e-input-group.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-input-group input,
  .e-bigger.e-small .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger.e-small input,
  .e-filled.e-float-input.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-float-input input,
  .e-bigger.e-small .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-group) input,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-group) input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea,
  .e-filled.e-input-group.e-control-wrapper textarea,
  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-input-group textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger textarea,
  .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-input-group textarea,
  .e-bigger .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-bigger textarea,
  .e-filled.e-float-input.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-float-input textarea,
  .e-bigger .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea.e-input  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled textarea.e-input.e-small#{$css},
  .e-filled.e-input-group.e-small textarea,
  .e-filled.e-input-group.e-small textarea.e-input,
  .e-small .e-filled.e-input-group textarea,
  .e-small .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-small textarea,
  .e-filled.e-float-input.e-small textarea.e-input,
  .e-small .e-filled.e-float-input textarea,
  .e-small .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-filled textarea.e-input.e-small.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger.e-small textarea,
  .e-filled.e-input-group.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group textarea,
  .e-bigger.e-small .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-bigger.e-small textarea,
  .e-filled.e-float-input.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-float-input textarea,
  .e-bigger.e-small .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  // Filled inside input border configuration

  .e-filled.e-float-input input,
  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $float-input-border;
      border-width: $zero-value;
    }
  }

  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-width: $zero-value;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-width: $zero-value;
    }
  }

  // Filled wrapper margin/padding configuration

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-radius: 4px 4px $zero-value $zero-value;
      padding: $filled-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-bigger,
  .e-bigger .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-filled-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $small-filled-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-small,
  .e-bigger .e-filled.e-input-group.e-small,
  .e-small .e-filled.e-input-group.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-small-filled-wrapper-padding;
    }
  }

  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-radius: 4px 4px $zero-value $zero-value;
      border-width: $input-group-full-border-width;
      margin-top: $filled-wrapper-margin;
      padding: $filled-float-input-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-bigger,
  .e-bigger .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-filled-float-input-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $small-filled-float-input-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-float-input.e-small,
  .e-bigger .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-small-filled-float-input-wrapper-padding;
    }
  }

  .e-rtl.e-filled.e-input-group,
  .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group,
  .e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group.e-small,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $small-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-input-group.e-small,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-small,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-small-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input,
  .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-small,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input.e-small,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $small-filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-float-input.e-small,
  .e-bigger .e-rtl.e-filled.e-float-input.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-bigger,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-small,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-small-filled-float-input-wrapper-rtl-padding;
    }
  }

  // Filled input padding configuration

  .e-filled input.e-input#{$css},
  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-input-padding;
    }
  }

  .e-filled .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $filled-input-padding-bottom;
    }
  }

  .e-filled.e-input-group input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-filled.e-input-group textarea.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-filled.e-input-group.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-input-padding;
    }
  }

  .e-filled input.e-input.e-bigger#{$css},
  .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger .e-input,
  .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger .e-filled input.e-input#{$css},
  .e-bigger .e-filled textarea.e-input#{$css},
  .e-bigger .e-filled.e-input-group .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-input-padding;
    }
  }

  .e-filled.e-input-group.e-bigger .e-input:focus,
  .e-bigger .e-filled.e-input-group .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input:focus,
  .e-filled.e-input-group.e-bigger.e-input-focus .e-input,
  .e-bigger .e-filled.e-input-group.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-input-padding;
    }
  }

  .e-filled .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-filled .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $filled-bigger-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $filled-small-input-padding-bottom;
    }
  }

  .e-filled .e-input#{$css}.e-small,
  .e-filled.e-input-group.e-small .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-input-padding;
    }
  }

  .e-filled.e-input-group.e-small .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-filled.e-input-group.e-small.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-input-padding;
    }
  }

  .e-filled .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-filled .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-bottom: $filled-bigger-small-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small.e-bigger#{$css},
  .e-bigger .e-filled .e-input#{$css}.e-small,
  .e-small .e-filled .e-input#{$css}.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-input,
  .e-filled.e-input-group.e-small .e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-input:focus,
  .e-filled.e-input-group.e-small .e-input.e-bigger:focus,
  .e-bigger .e-filled.e-input-group.e-small .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input.e-bigger:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-filled.e-input-group.e-small.e-bigger.e-input-focus .e-input,
  .e-filled.e-input-group.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .e-filled.e-float-input input,
  .e-filled.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-input-padding;
    }
  }

  .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input input.e-bigger,
  .e-bigger .e-filled.e-float-input input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-float-input-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger input,
  .e-filled.e-float-input.e-small input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-float-input-padding;
    }
  }

  .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-float-input-padding;
    }
  }

  .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-filled.e-float-input input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-filled.e-float-input input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-rtl input:focus,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-rtl .e-filled.e-float-input input:focus,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-filled.e-float-input.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-rtl .e-filled input.e-input.e-small#{$css},
  .e-filled input.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl .e-filled input.e-input#{$css},
  .e-small .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-small.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group.e-small input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input.e-small,
  .e-rtl .e-filled.e-input-group input.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-filled.e-input-group.e-rtl input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-small.e-rtl .e-filled.e-input-group input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-rtl.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-filled.e-float-input.e-small.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-small input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-filled.e-float-input.e-rtl input.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input.e-small,
  .e-rtl .e-filled.e-float-input input.e-small,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input.e-small,
  .e-small .e-filled.e-float-input.e-rtl input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-small.e-rtl .e-filled.e-float-input input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-small.e-rtl .e-filled.e-float-input input:focus,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-rtl input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-rtl.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-rtl .e-filled input.e-input.e-bigger#{$css},
  .e-filled input.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl .e-filled input.e-input#{$css},
  .e-bigger .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-rtl input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-bigger.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input.e-bigger,
  .e-filled.e-float-input.e-rtl input.e-bigger,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input.e-bigger,
  .e-rtl .e-filled.e-float-input input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-bigger .e-filled.e-float-input.e-rtl input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger.e-rtl .e-filled.e-float-input input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input input:focus,
  .e-bigger .e-filled.e-float-input.e-rtl input:focus,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-rtl.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-bigger .e-filled input.e-input.e-small.e-rtl#{$css},
  .e-filled.e-input-group.e-small.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-small.e-rtl input.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-bigger.e-rtl input.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-small input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-input-rtl-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-small.e-rtl input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-small input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input:focus,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-bigger.e-rtl input:focus,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:focus,
  .e-filled.e-float-input.e-bigger.e-small.e-rtl input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger input:focus,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-rtl .e-filled.e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-bigger.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-bigger.e-small.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-float-input-rtl-padding;
      text-indent: 0;
    }
  }

  // Filled input font size configuration

  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-bigger,
  .e-bigger .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger,
  .e-small.e-bigger .e-filled.e-float-input,
  .e-bigger .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-disabled,
  .e-bigger .e-filled.e-float-input.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-bigger.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-bigger.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-font-size;
    }
  }

  // Filled min-height configuration

  .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $bigger-filled-default-input-min-height;
    }
  }

  .e-filled.e-float-input.e-bigger input,
  .e-bigger .e-filled.e-float-input input,
  .e-filled.e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-input-group input,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $bigger-filled-input-min-height;
    }
  }

  .e-filled.e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-filled.e-input-group:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $small-filled-default-input-min-height;
    }
  }

  .e-filled.e-float-input.e-small input,
  .e-small .e-filled.e-float-input input,
  .e-filled.e-float-input.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-input-group input,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $small-filled-input-min-height;
    }
  }

  .e-filled.e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $bigger-small-filled-default-input-min-height;
    }
  }

  .e-float-input.e-bigger.e-small.e-filled input,
  .e-bigger .e-float-input.e-filled.e-small input,
  .e-small .e-float-input.e-filled.e-bigger input,
  .e-float-input.e-filled.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-input-group.e-small input,
  .e-small .e-float-input.e-filled.e-input-group.e-bigger input,
  .e-float-input.e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-filled.e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-filled.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-filled.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-filled.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger input  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $bigger-small-filled-input-min-height;
    }
  }

  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $filled-default-input-min-height;
    }
  }

  .e-filled.e-input-group:not(.e-float-input) input.e-input,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $filled-default-input-min-height;
    }
  }

  .e-float-input.e-filled.e-input-group.e-control-wrapper input,
  .e-float-input.e-filled input,
  .e-float-input.e-filled.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $filled-input-min-height;
    }
  }

  // Filled label configuration

  .e-filled label.e-float-text,
  .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      left: $filled-input-label-left;
      letter-spacing: .009375em;
      line-height: 1.15;
      padding-left: $float-label-padding;
      pointer-events: none;
      right: auto;
      top: $filled-input-label-top;
      transform: none;
      transition: transform 150ms cubic-bezier(.4, $zero-value, .2, 1), color 150ms cubic-bezier(.4, $zero-value, .2, 1);
      width: 100%;
    }
  }

  .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      padding-left: $float-label-padding;
      top: $filled-input-label-top;
      transform: none;
      width: 100%;
    }
  }

  .e-filled.e-float-input input:focus ~ label.e-float-text,
  .e-filled.e-float-input input:valid ~ label.e-float-text,
  .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
    }
  }

  .e-filled.e-float-input textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
    }
  }

  .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .e-bigger .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-bigger .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .e-small .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-small .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .e-bigger .e-filled.e-float-input.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-bigger .e-filled.e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-bigger label.e-float-text,
  .e-filled.e-float-input label.e-float-text.e-bigger,
  .e-filled.e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-filled.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small textarea ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-float-text.e-small,
  .e-filled.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-filled.e-float-input textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-filled.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top;
      transform: none;
    }
  }

  .e-filled.e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translateY(-50%) scale(.75);
    }
  }

  .e-bigger .e-filled.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top;
    }
  }

  .e-float-input.e-filled.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translateY(-50%) scale(.75);
    }
  }

  // Filled textbox label padding config

  .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input label.e-float-text,
  .e-bigger .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-bigger.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-bigger label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input label.e-float-text .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-filled-input-label-left;
    }
  }

  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small label.e-float-text,
  .e-filled.e-float-input.e-small label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger label.e-float-text,
  .e-small .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input label.e-float-text .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $small-filled-input-label-left;
    }
  }

  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $bigger-small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input label.e-float-text .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-small-filled-input-label-left;
    }
  }

  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $bigger-small-filled-input-label-left;
    }
  }

  // Filled input ripple effect configuration

  .e-filled.e-float-input .e-float-line,
  .e-float-input.e-filled.e-control-wrapper .e-float-line {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      bottom: -1px;
      position: absolute;
    }
  }

  .e-float-input.e-filled .e-float-line,
  .e-float-input.e-filled .e-float-text,
  .e-float-input.e-filled.e-control-wrapper .e-float-line,
  .e-float-input.e-filled.e-control-wrapper .e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-filled.e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      bottom: -1px;
    }
  }

  // Filled input Icon margin configuration

  .e-filled.e-input-group .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-icon-size;
      margin-bottom: $zero-value;
      margin-top: $zero-value;
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 4px;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' {
      font-size: $bigger-filled-input-icon-size;
      min-height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-icon-size;
      height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-icon-size;
      min-height: $bigger-small-filled-input-icon-min-height;
      min-width: $bigger-small-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-icon-size;
      margin-bottom: $zero-value;
      margin-top: $zero-value;
      padding: 8px;
      @if $input-skin-name == 'Material3' {
        padding: 0;
        margin: 9px 12px 9px 0;
      }
    }
  }

  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 4px;
    }
  }

  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-icon-size;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  // Filled input clear icon configuration

  .e-filled.e-float-input .e-clear-icon,
  .e-filled.e-float-input.e-control-wrapper .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-clear-icon-size;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' {
      padding: $zero-value;
      margin: 2px;
      height: 32px;
    }
  }

  .e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-clear-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $bigger-filled-input-clear-icon-size;
      min-height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-clear-icon-size;
      height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
    }
  }

  .e-filled.e-input-group.e-float-input.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name == 'material' {
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' {
      padding: $zero-value;
      margin: 8px;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-clear-icon-size;
      min-height: $bigger-small-filled-input-icon-min-height;
      min-width: $bigger-small-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-filled.e-input-group.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value $zero-value $zero-value 8px;
    }
  }

  .e-filled.e-input-group.e-small .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $small-filled-input-clear-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 4px;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $small-filled-input-clear-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-input.e-control-wrapper .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value $zero-value $zero-value 4px;
    }
  }

  .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 8px $zero-value $zero-value;
    }
  }

  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $zero-value 4px $zero-value $zero-value;
    }
  }

  .e-filled.e-float-input .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-input-group .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-small .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-filled.e-input-group.e-small .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input .e-clear-icon::before,
  .e-small .e-filled.e-input-group .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-clear-icon-size;
    }
  }

  // Filled input - prefix icon configuration

  .e-filled.e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: none;
      border-width: $zero-value;
    }
  }

  .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-bigger,
  .e-filled.e-float-input .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $bigger-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $bigger-small-filled-input-label-top;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-icon-size;
      margin: $zero-value;
      min-height: $filled-input-left-icon-min-height;
      min-width: $filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-filled-input-icon-size;
      margin: $zero-value;
      min-height: $bigger-filled-input-left-icon-min-height;
      min-width: $bigger-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon.e-small,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-small .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-filled-input-icon-size;
      margin: $zero-value;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-icon-size;
      margin: $zero-value;
      min-height: $bigger-small-filled-input-left-icon-min-height;
      min-width: $bigger-small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $zero-value;
      min-height: $filled-input-left-icon-min-height;
      min-width: $filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $zero-value;
      min-height: $bigger-filled-input-left-icon-min-height;
      min-width: $bigger-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $zero-value;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $zero-value;
      min-height: $bigger-small-filled-input-left-icon-min-height;
      min-width: $bigger-small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .e-filled.e-float-input.e-bigger.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-small .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .e-filled.e-float-input.e-small.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $zero-value;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $zero-value;
    }
  }

  .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
    }
  }

  .e-filled.e-input-group .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-filled.e-rtl.e-input-group .e-input-group-icon,
  .e-filled.e-rtl.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-rtl.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-rtl.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-small.e-bigger .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $zero-value;
    }
  }

  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-rtl .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $zero-value;
    }
  }

  // Filled input textarea padding / wrapper padding configuration

  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group.e-multi-line-input textarea,
  .e-filled.e-input-group.e-control-wrapper.e-multi-line-input textarea,
  .e-filled.e-float-input.e-multi-line-input textarea,
  .e-filled.e-float-input.e-control-wrapper.e-multi-line-input textarea {
    box-sizing: border-box;
  }

  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea,
  .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea,
  .e-filled.e-input-group.e-input-focus textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-textarea-padding;
    }
  }

  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-bigger textarea,
  .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-filled.e-input-group textarea.e-bigger,
  .e-filled.e-input-group textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea.e-bigger,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group textarea,
  .e-bigger .e-filled.e-input-group textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-textarea-padding;
    }
  }

  .e-filled.e-float-input.e-bigger textarea,
  .e-filled.e-float-input textarea.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
  .e-bigger .e-filled.e-float-input textarea,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-input-focus.e-bigger textarea,
  .e-filled.e-input-group.e-input-focus.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea.e-bigger,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-input-focus textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-small textarea,
  .e-filled.e-input-group.e-small textarea.e-input,
  .e-filled.e-input-group textarea.e-small,
  .e-filled.e-input-group textarea.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-input-group textarea,
  .e-small .e-filled.e-input-group textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-textarea-padding;
    }
  }

  .e-filled.e-float-input.e-small textarea,
  .e-filled.e-float-input textarea.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-filled.e-float-input textarea,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-input-focus.e-small textarea,
  .e-filled.e-input-group.e-input-focus.e-small textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea.e-small,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-small,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-small .e-filled.e-input-group.e-input-focus textarea,
  .e-small .e-filled.e-input-group.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-small textarea.e-input.e-bigger,
  .e-filled.e-input-group textarea.e-input.e-bigger.e-small,
  .e-filled.e-input-group.e-bigger textarea.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-bigger .input-group textarea.e-small,
  .e-bigger .e-filled.e-input-group.e-small textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-small .input-group textarea.e-bigger,
  .e-small .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-textarea-padding;
    }
  }

  .e-filled.e-float-input textarea.e-bigger.e-small,
  .e-filled.e-float-input.e-small.e-bigger textarea,
  .e-filled.e-float-input.e-small textarea.e-bigger,
  .e-filled.e-float-input.e-bigger textarea.e-small,
  .e-bigger .e-filled.e-float-input.e-small textarea,
  .e-bigger.e-small .e-filled.e-float-input textarea,
  .e-bigger .e-float-input textarea.e-small,
  .e-small .e-filled.e-float-input.e-bigger textarea,
  .e-small .float-input textarea.e-bigger,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-input-focus textarea.e-input.e-bigger.e-small,
  .e-filled.e-input-group.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-input-focus.e-bigger textarea.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-input-focus textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-multi-line-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $small-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-bigger.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-small-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $small-filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-bigger.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $bigger-small-filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-textarea-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-float-textarea-padding;
      text-indent: 0;
    }
  }

  .e-rtl .e-filled textarea.e-input.e-small#{$css},
  .e-filled textarea.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl .e-filled textarea.e-input#{$css},
  .e-small .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input.e-small,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-textarea-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea.e-small,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-small,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea.e-small,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea.e-small,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-small-float-textarea-padding;
      text-indent: 0;
    }
  }

  .e-rtl .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled textarea.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl .e-filled textarea.e-input#{$css},
  .e-bigger .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-textarea-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-bigger.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-bigger,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea.e-bigger,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea.e-bigger,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-float-textarea-padding;
      text-indent: 0;
    }
  }

  .e-bigger .e-filled textarea.e-input.e-small.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-small.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-bigger.e-rtl textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-textarea-padding;
      text-indent: 0;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-small.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-bigger.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small.e-rtl textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-bigger-small-float-textarea-padding;
      text-indent: 0;
    }
  }

  // Filled input - prefix icon configuration

  .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: 8px;
    }
  }

  .e-rtl .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: 8px;
    }
  }

  .e-filled.e-float-input.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: 8px;
    }
  }

  .e-filled.e-float-input.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-small .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: 4px;
    }
  }

  .e-rtl.e-bigger.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: 8px;
    }
  }

  .e-rtl.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: 4px;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-width: $zero-value;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation;
      bottom: -1px;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation;
    }
  }

  .e-filled.e-input-group.e-float-icon-left::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-width;
      bottom: -1px;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-width;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: $zero-value;
    }
  }

  .e-filled.e-input-group.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom: $input-group-border;
    }
  }

  .e-float-input.e-control-wrapper.e-hidden,
  .e-input-group.e-control-wrapper.e-hidden {
    display: none;
  }

  .e-filled.e-input-group.e-float-icon-left,
  .e-filled.e-input-group.e-success.e-float-icon-left,
  .e-filled.e-input-group.e-warning.e-float-icon-left,
  .e-filled.e-input-group.e-error.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-success.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-warning.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-error.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
  }

  .e-input-group.e-control-container.valid.modified,
  .e-input-group.e-control-container.invalid,
  .e-float-input.e-control-container.valid.modified,
  .e-float-input.e-control-container.invalid {
    outline: none;
  }

  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append:not(.e-outline) .e-input-in-wrap,
  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend:not(.e-outline) .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $input-box-border-color;
    }
  }

  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $error-font-color;
    }
  }

  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $success-font-color;
    }
  }

  .e-input-group:not(.e-outline).e-prepend:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-success:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-warning:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-error:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-success:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-warning:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }

  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }

  .e-input-group:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }
}


/* stylelint-disable-line no-empty-source */


@include export-module('input-theme') {

  /*! input theme */

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  textarea.e-input#{$css},
  .e-float-input input,
  .e-float-input.e-control-wrapper input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    background: $input-bg-color;
    border-color: $input-box-border-color;
    color: $input-font-color;
  }

  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-float-input,
  .e-float-input.e-input-group,
  .e-float-input.e-control-wrapper,
  .e-float-input.e-input-group.e-control-wrapper {
    background: $input-bg-color;
    color: $input-font-color;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    background: transparent;
    border-color: $input-box-border-color;
    color: $input-icon-font-color;
    @if ($input-skin-name == 'FluentUI') {
      border-color: $input-group-icon-border-color;
    }
    @if ($input-skin-name == 'Material3') {
      margin: 0;
    }
  }

  .e-input-group.e-disabled .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    color: $input-group-disabled-color;
  }

  /* stylelint-disable property-no-vendor-prefix */
  /* stylelint-disable selector-no-vendor-prefix */
  .e-input#{$css}[disabled],
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input input[disabled],
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input textarea[disabled],
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled  {
    @if $input-skin-name != 'bootstrap5' {
      -webkit-text-fill-color: $input-disable-font-color;
    }
    background: $input-disable-bg-color;
    color: $input-disable-font-color;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
      background-position: bottom -1px left 0;
      background-repeat: repeat-x;
      background-size: 4px 1px;
      border-bottom-color: transparent;
    }

    @else {
      border-color: $input-disable-border-color;
    }
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input[disabled],
  .e-input-group.e-disabled input.e-input,
  .e-input-group.e-control-wrapper.e-disabled input.e-input,
  .e-input-group.e-disabled textarea.e-input,
  .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    background: none;
    color: inherit;
  }

  .e-input-group .e-input[readonly],
  .e-input-group.e-control-wrapper .e-input[readonly],
  .e-float-input input[readonly],
  .e-float-input.e-control-wrapper input[readonly],
  .e-float-input textarea[readonly],
  .e-float-input.e-control-wrapper textarea[readonly] {
    background: $input-readonly-bg-color;
    @if $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
      color: $input-readonly-color;
    }
    @if $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' {
      color: inherit;
    }
  }

  .e-input-group .e-input[readonly] ~ span.e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon,
  .e-float-input input[readonly] ~ span.e-input-group-icon,
  .e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon,
  .e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
    @if $input-skin-name == 'bootstrap5' {
      background: $input-readonly-bg-color;
      color: $input-icon-font-color;
    }
  }

  .e-float-input.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled input,
  .e-float-input.e-disabled textarea,
  .e-float-input.e-control-wrapper.e-disabled textarea,
  .e-float-input input[disabled],
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input textarea[disabled],
  .e-float-input.e-control-wrapper textarea[disabled] {
    color: inherit;
  }

  /*! Added color to textbox for disbaled state */
  .e-float-input:not(.e-disabled) input[disabled],
  .e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
  .e-float-input:not(.e-disabled) textarea[disabled],
  .e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
    -webkit-text-fill-color: $input-disable-font-color;
    color: $input-disable-font-color;
  }

  .e-input-group.e-disabled .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    background: $input-disabled-group-bg-color;
    border-color: $input-disable-border-color;
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
      background: $input-hover-bg-color;
    }
    @if $input-skin-name == 'bootstrap4' {
      border-color: $input-group-border-color-hover;
    }
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-group-border-color-hover;
    }
    @if $input-skin-name == 'Material3' {
      border: $input-icon-hover-border;
      background: $input-icon-hover-bg-color;
    }
    color: $input-group-hovered-color;
  }

  .e-input-group.e-disabled .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: transparent;
    }
  }

  .e-input#{$css}.e-success,
  .e-input#{$css}.e-success:focus,
  .e-input-group.e-success input.e-input,
  .e-input-group.e-control-wrapper.e-success input.e-input,
  .e-input-group.e-success .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-success .e-input-group-icon,
  .e-input-group.e-success textarea.e-input,
  .e-input-group.e-control-wrapper.e-success textarea.e-input {
    border-color: $input-success-color;
  }

  .e-input#{$css}.e-warning,
  .e-input#{$css}.e-warning:focus,
  .e-input-group.e-warning input.e-input,
  .e-input-group.e-control-wrapper.e-warning input.e-input,
  .e-input-group.e-warning .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
  .e-input-group.e-warning textarea.e-input,
  .e-input-group.e-control-wrapper.e-warning textarea.e-input {
    border-color: $input-warning-color;
  }

  .e-input + .e-input-group-icon:not(.e-input-group):not(.e-float-icon-left):last-child:hover,
  .e-input-group.e-success .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-success.e-control-wrapper .e-input + .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-success-color;
    }
  }

  .e-input#{$css}.e-error,
  .e-input#{$css}.e-error:focus,
  .e-input-group.e-error input.e-input,
  .e-input-group.e-control-wrapper.e-error input.e-input,
  .e-input-group.e-control-wrapper.e-error .e-input-group-icon,
  .e-input-group.e-error .e-input-group-icon,
  .e-input-group.e-error textarea.e-input,
  .e-input-group.e-control-wrapper.e-error textarea.e-input {
    border-color: $input-error-color;
  }

  label.e-float-text,
  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input.e-error label.e-float-text,
  .e-float-input.e-control-wrapper.e-error label.e-float-text,
  .e-float-input.e-error input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
    color: $input-error-color;
    @if $input-skin-name == 'highcontrast' {
      color: $content-font;
    }
    @if ($input-skin-name == 'FluentUI') {
      color: $float-label-font-color;
    }
  }

  .e-float-input input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper textarea {
    border-bottom-color: $input-box-border-color;
  }

  .e-float-input.e-success input,
  .e-float-input.e-success textarea,
  .e-float-input.e-control-wrapper.e-success input,
  .e-float-input.e-control-wrapper.e-success textarea {
    @include input-state-color ($input-success-color);
  }

  .e-float-input.e-warning input,
  .e-float-input.e-control-wrapper.e-warning input,
  .e-float-input.e-warning textarea,
  .e-float-input.e-control-wrapper.e-warning textarea {
    @include input-state-color ($input-warning-color);
  }

  .e-float-input.e-error input,
  .e-float-input.e-control-wrapper.e-error input,
  .e-float-input.e-error textarea,
  .e-float-input.e-control-wrapper.e-error textarea {
    @include input-state-color ($input-error-color);
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $input-active-accent-color;
    }
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $input-success-color;
    }
  }

  .e-float-input.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $input-warning-color;
    }
  }

  .e-float-input:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input:not(.e-error):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
    color: $input-placeholder;
  }

  .e-float-input.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $input-error-color;
    }
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
    background: $input-group-pressed-bg;
    color: $input-group-pressed-color;
    @if $input-skin-name == 'bootstrap' {
      -webkit-box-shadow: $input-icon-shadow;
      box-shadow: $input-icon-shadow;
    }
    @if $input-skin-name == 'bootstrap4' {
      -webkit-box-shadow: $input-icon-shadow;
      border-color: $pressed-border-color;
      box-shadow: $input-icon-shadow;
    }
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .e-input-group.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .e-input-group.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  
  .e-input-group:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  
  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  
  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
    }
  }

  input.e-input#{$css}::selection,
  textarea.e-input#{$css}::selection,
  .e-input-group input.e-input::selection,
  .e-input-group.e-control-wrapper input.e-input::selection,
  .e-float-input input::selection,
  .e-float-input.e-control-wrapper input::selection,
  .e-input-group textarea.e-input::selection,
  .e-input-group.e-control-wrapper textarea.e-input::selection,
  .e-float-input textarea::selection,
  .e-float-input.e-control-wrapper textarea::selection {
    @include input-selection;
  }

  .e-float-input.e-small textarea::selection,
  .e-float-input textarea::selection {
    @include input-selection;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  
  input.e-input#{$css}::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group input.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  textarea.e-input#{$css}::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group textarea.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  
  .e-input-group.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-input-group::before,
  .e-input-group::after,
  .e-input-group.e-control-wrapper::before,
  .e-input-group.e-control-wrapper::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-success::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-success::after,
  .e-input-group.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-input-group.e-success::before,
  .e-input-group.e-success::after,
  .e-input-group.e-control-wrapper.e-success::before,
  .e-input-group.e-control-wrapper.e-success::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left).e-warning:not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left).e-warning:not(.e-float-input)::after,
  .e-input-group.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-input-group.e-warning::before,
  .e-input-group.e-warning::after,
  .e-input-group.e-control-wrapper.e-warning::before,
  .e-input-group.e-control-wrapper.e-warning::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
  .e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-input-group.e-error::before,
  .e-input-group.e-error::after,
  .e-input-group.e-control-wrapper.e-error::before,
  .e-input-group.e-control-wrapper.e-error::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-input-group.e-success .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-success .e-input-group-icon {
    color: $input-icon-font-color;
  }

  .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .e-input-group.e-warning .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
    color: $input-icon-font-color;
  }

  .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .e-input-group.e-error .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-error .e-input-group-icon {
    color: $input-icon-font-color;
  }

  .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .e-input-group.e-success:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-success:not(.e-disabled) .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-icon-font-color;
    }
  }

  .e-input-group.e-warning:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled) .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-icon-font-color;
    }
  }

  .e-input-group.e-error:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-error:not(.e-disabled) .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-icon-font-color;
    }
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input {
    border-color: $input-box-border-color;
  }

  
  .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
    border-color: $input-active-border-color;
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI'  {
      border-radius: $input-groupo-focus-border-radius;
      box-shadow: $input-group-focus-box-shadow;
    }
    @if $input-skin-name == 'bootstrap4'  {
      transition: $input-transition-shadow;
    }
  }

  
  .e-input-group .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      box-shadow: none;
    }
  }

  
  .e-input#{$css}:focus:not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-shadow;
    }
  }

  
  .e-input#{$css}:focus:not(.e-error):not(.e-warning).e-success,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI'  {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

  
  .e-input#{$css}:focus:not(.e-success):not(.e-error).e-warning,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-shadow;
    }
  }

  .e-input-group:not(.e-float-input):not(.e-float-icon-left) .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-float-input):not(.e-float-icon-left) .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group:not(.e-float-input):not(.e-float-icon-left).e-input-focus .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-float-input):not(.e-float-icon-left).e-input-focus .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap .e-input:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      box-shadow: none;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
  .e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-input-focus input.e-input,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-input-focus input.e-input,
  .e-input-group:not(.e-success):not(.e-warning):not(.e-error) textarea.e-input:focus,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) textarea.e-input:focus {
    border-color: $input-group-active-border-color;
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-focus;
    }
  }

   
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-group-border-color-focus;
    }
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'bootstrap4'  {
      transition: $input-transition-shadow;
    }
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      border-color: $input-group-border-color-focus;
      border-radius: $input-groupo-focus-border-radius;
      box-shadow: $input-group-focus-box-shadow;
    }
  }

   
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-shadow;
    }
  }

   
  .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

   
  .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-shadow;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    border-color: $input-box-border-color;
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5') {
      border-color: $input-group-border-right-focus;
    }
  }

  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-focus.e-control-wrapper.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-focus.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI') {
      border-color: $input-group-border-left-focus;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
      border-color: transparent;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-full-border-color;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-group-full-border-color;
    }
    @if $input-skin-name == 'tailwind' {
      box-shadow: $input-group-border-shadow;
    }
    @if $input-skin-name == 'FluentUI' {
      box-shadow: none;
    }
  }

   
  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
      border-color: $input-active-border-color;
    }
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-shadow;
    }
  }

  .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-shadow;
    }
  }

  .e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
      border-color: $input-disable-border-color;
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    border-bottom-color: $input-box-border-color;
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
  }

  .e-input-group.e-success,
  .e-input-group.e-control-wrapper.e-success,
  .e-float-icon-left.e-input-group.e-success,
  .e-float-icon-left.e-control-wrapper.e-input-group.e-success,
  .e-input-group.e-warning,
  .e-input-group.e-control-wrapper.e-warning,
  .e-float-icon-left.e-input-group.e-warning,
  .e-float-icon-left.e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-error,
  .e-input-group.e-control-wrapper.e-error,
  .e-float-icon-left.e-input-group.e-error,
  .e-float-icon-left.e-input-group.e-control-wrapper.e-error,
  .e-input-group.e-float-icon-left,
  .e-input-group.e-control-wrapper.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: transparent;
    }
  }

  .e-input-group.e-success,
  .e-input-group.e-control-wrapper.e-success,
  .e-input-group.e-success:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left) {
    @include input-state-color ($input-group-success-color);
  }

  .e-input-group.e-float-icon-left.e-success .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-group-success-color);
    }
  }

  .e-input-group.e-warning,
  .e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-warning:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left) {
    @include input-state-color ($input-group-warning-color);
  }

  .e-input-group.e-float-icon-left.e-warning .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-group-warning-color);
    }
  }

  .e-input-group.e-error,
  .e-input-group.e-control-wrapper.e-error,
  .e-input-group.e-error:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @include input-state-color ($input-group-error-color);
  }

  .e-input-group.e-float-icon-left.e-error .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-group-error-color);
    }
  }

  .e-float-input .e-clear-icon,
  .e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    color: $input-clear-icon-color;
  }

  .e-float-input .e-clear-icon:active,
  .e-float-input.e-control-wrapper .e-clear-icon:active,
  .e-input-group .e-clear-icon:active,
  .e-input-group.e-control-wrapper .e-clear-icon:active {
    @if ($input-skin-name == 'FluentUI') {
      color: $input-group-pressed-color;
    }
  }

  .e-float-input .e-clear-icon:hover,
  .e-float-input.e-control-wrapper .e-clear-icon:hover,
  .e-input-group .e-clear-icon:hover,
  .e-input-group.e-control-wrapper .e-clear-icon:hover {
    color: $input-clear-icon-hover-color;
    @if ($input-skin-name == 'FluentUI') {
      background: $input-clear-icon-hover-bg-color;
    }
    @if $input-skin-name == 'Material3' {
      border: $input-clear-icon-hover-border;
      background: $input-clear-icon-hover-bg-color;
    }
  }

  .e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      color: $input-clear-icon-hover-color;
    }
    @if ($input-skin-name == 'FluentUI') {
      background: $input-clear-icon-hover-bg-color;
    }
  }

  .e-float-input.e-disabled .e-clear-icon,
  .e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-disabled .e-clear-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon {
    color: $input-group-disabled-color;
  }

  // Double border issue while adding floating input with class .e-input
  .e-float-input.e-input-focus .e-input:focus,
  .e-float-input.e-control-wrapper.e-input-focus .e-input:focus {
    border-bottom-color: transparent;
    border-top-color: transparent;
  }

  .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
    color: $input-placeholder;
  }

  .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-input-group.e-disabled .e-float-text,
  .e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-float-input input[disabled] ~ label.e-float-text,
  .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-disabled label.e-float-text,
  .e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input textarea[disabled] ~ label.e-float-text,
  .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-active-accent-color;
    }
  }

  input.e-input#{$css}:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  textarea.e-input#{$css}:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]):not(:focus),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]):not(:focus),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]):not(:focus),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]):not(:focus) {
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-focus;
    }
  }

  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-group-border-color-focus;
    }
  }

  .e-input-group:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'FluentUI' {
      border-color: $input-active-border-color;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    color: $float-label-font-color;
  }

  // Outline textbox

  .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-input-group,
  .e-outline.e-float-input.e-control-wrapper,
  .e-outline.e-float-input.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-font-color;
    }
  }

  .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-disabled,
  .e-outline.e-float-input.e-disabled,
  .e-outline.e-float-input.e-input-group.e-disabled,
  .e-outline.e-float-input.e-control-wrapper.e-disabled,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-disabled-input-font-color;
    }
  }

  .e-outline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-hover-border-color;
      color: $outline-hover-font-color;
    }
  }

  .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-float-icon-left:hover.e-valid-input:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-float-icon-left:hover.e-valid-input:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left.e-valid-input:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left.e-valid-input:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-hover-border-color;
    }
  }

  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-active-border-color;
      box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
    }
  }

  .e-outline.e-input-group:not(.e-input-focus),
  .e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-float-icon-left:not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-border-color;
    }
  }

  .e-outline.e-input-group.e-error,
  .e-outline.e-input-group.e-control-wrapper.e-error,
  .e-outline.e-input-group.e-error:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left),
  .e-outline.e-float-input.e-error,
  .e-outline.e-float-input.e-input-group.e-error,
  .e-outline.e-float-input.e-control-wrapper.e-error,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-error-color;
    }
  }

  .e-outline.e-float-input.e-success.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-success.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-warning.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-warning.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-error.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-error.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-input-group.e-success,
  .e-outline.e-input-group.e-control-wrapper.e-success,
  .e-outline.e-input-group.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-outline.e-float-input.e-success,
  .e-outline.e-float-input.e-input-group.e-success,
  .e-outline.e-float-input.e-control-wrapper.e-success,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-success-color;
    }
  }

  .e-outline.e-input-group.e-warning,
  .e-outline.e-input-group.e-control-wrapper.e-warning,
  .e-outline.e-input-group.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-outline.e-float-input.e-warning,
  .e-outline.e-float-input.e-input-group.e-warning,
  .e-outline.e-float-input.e-control-wrapper.e-warning,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-warning-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
    }
  }

  .e-outline.e-input-group.e-disabled:not(.e-input-focus),
  .e-outline.e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-disabled.e-float-icon-left:not(.e-input-focus),
  .e-outline.e-input-group.e-disabled.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-disabled-border-color;
    }
  }

  .e-outline.e-float-input.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-success.e-valid-input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-success) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-success).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-error.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-error-color;
    }
  }

  .e-outline.e-float-input.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-warning.e-valid-input label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-warning) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-warning).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-input-group.e-valid-input.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-input-group.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-valid-input.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus label.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-active-border-color;
    }
  }

  .e-outline.e-input[disabled],
  .e-outline.e-input-group .e-input[disabled],
  .e-outline.e-input-group.e-control-wrapper .e-input[disabled],
  .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-disabled,
  .e-outline.e-float-input input[disabled],
  .e-outline.e-float-input.e-control-wrapper input[disabled],
  .e-outline.e-float-input textarea[disabled],
  .e-outline.e-float-input.e-control-wrapper textarea[disabled],
  .e-outline.e-float-input.e-disabled,
  .e-outline.e-float-input.e-control-wrapper.e-disabled,
  .e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-outline.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background-image: none;
      border-bottom-color: $outline-disabled-border-color;
      border-color: $outline-disabled-border-color;
    }
  }

  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-disabled-border-color;
    }
  }

  .e-outline.e-float-input.e-input-group.e-disabled .e-float-text,
  .e-outline.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-outline.e-float-input input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-disabled label.e-float-text,
  .e-outline.e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-outline.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-outline.e-float-input textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-outline.e-input-group.e-disabled .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-group-disabled-color;
    }
  }

  // Outline input clear icon

  .e-outline.e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-clear-icon-hover-color;
    }
  }

  .e-outline.e-float-input:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-input-group:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-clear-icon-active-color;
    }
  }

  // Filled input background color changes

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper,
  .e-filled.e-float-input,
  .e-filled.e-float-input.e-input-group,
  .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $filled-input-bg-color;
      transition: $background-color-transition;
    }
  }

  .e-filled.e-input-group:hover,
  .e-filled.e-input-group.e-control-wrapper:hover,
  .e-filled.e-float-input:hover,
  .e-filled.e-float-input.e-input-group:hover,
  .e-filled.e-float-input.e-control-wrapper:hover,
  .e-filled.e-float-input.e-input-group.e-control-wrapper:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $filled-input-overlay-focused-bg-color;
      transition: $background-color-transition;
    }
  }

  .e-filled.e-input-group.e-input-focus,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input.e-input-focus,
  .e-filled.e-float-input.e-input-group.e-input-focus,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-input-focus,
  .e-filled.e-input-group:hover.e-input-focus,
  .e-filled.e-input-group:hover.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input:hover.e-input-focus,
  .e-filled.e-float-input:hover.e-input-group.e-input-focus,
  .e-filled.e-float-input:hover.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input:hover.e-input-group.e-control-wrapper.e-input-focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $filled-input-overlay-activated-bg-color;
      transition: $background-color-transition;
    }
  }

  // Filled input border color changes

  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-full-border-color;
    }
  }

  .e-filled.e-float-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-full-border-color;
    }
  }

  .e-filled.e-float-input.e-success,
  .e-filled.e-float-input.e-control-wrapper.e-success,
  .e-filled.e-input-group.e-float-icon-left.e-success,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-success {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-success-color);
    }
  }

  .e-filled.e-float-input.e-warning,
  .e-filled.e-float-input.e-control-wrapper.e-warning,
  .e-filled.e-input-group.e-float-icon-left.e-warning,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-warning {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-warning-color);
    }
  }

  .e-filled.e-float-input.e-error,
  .e-filled.e-float-input.e-control-wrapper.e-error,
  .e-filled.e-input-group.e-float-icon-left.e-error,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-error {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-state-color ($input-error-color);
    }
  }

  // Filled input floating label color configuration

  .e-filled label.e-float-text,
  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-error label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text,
  .e-filled.e-float-input.e-error input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-error-color;
    }
  }

  .e-filled.e-float-input.e-success label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success label.e-float-text,
  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-warning label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning label.e-float-text,
  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-active-accent-color;
    }
  }

  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group .e-input:-ms-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  input.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
      color: $input-placeholder-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  input.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-float-label-color;
    }
  }

  // Filled input clear icon states

  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-clear-icon-hover-color;
    }
  }

  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-clear-icon-active-color;
    }
  }

  // Filled input disabled configuration

  .e-filled.e-float-input.e-disabled .e-clear-icon,
  .e-filled.e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-disabled .e-input-group-icon,
  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-input#{$css}[disabled],
  .e-input-group.e-filled .e-input[disabled],
  .e-input-group.e-filled.e-control-wrapper .e-input[disabled],
  .e-input-group.e-filled.e-disabled,
  .e-input-group.e-filled.e-control-wrapper.e-disabled,
  .e-filled.e-float-input input[disabled],
  .e-filled.e-float-input.e-control-wrapper input[disabled],
  .e-filled.e-float-input textarea[disabled],
  .e-filled.e-float-input.e-control-wrapper textarea[disabled],
  .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' {
      background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
    @if $input-skin-name == 'Material3' {
      //background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-disabled-border-color;
    }
  }

  .e-filled.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input:not(.e-disabled) input[disabled],
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
  .e-filled.e-float-input:not(.e-disabled) textarea[disabled],
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text,
  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-filled.e-float-input input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-disabled label.e-float-text,
  .e-filled.e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $filled-input-disabled-font-color;
    }
  }

  // Filled input ripple action

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::after  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-success input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-success input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-warning input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus inputs ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }
}


@include export-module('input-material-icons') {
  .e-float-input,
  .e-float-input.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e932';
      font-family: 'e-icons';
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e932';
      font-family: 'e-icons';
    }
  }

  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e208';
      font-family: 'e-icons';
    }
  }

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e208';
      font-family: 'e-icons';
    }
  }

  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e208';
      font-family: 'e-icons';
    }
  }

  .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e208';
      font-family: 'e-icons';
    }
  }
}

//default
//undefined
//enddefault

@include export-module('popup-layout') {

  /*! popup layout */
  .e-popup {
    height: auto;
    position: absolute;
    width: auto;
    z-index: 1000;
  }

  .e-popup.e-popup-open {
    display: block;
  }

  .e-popup.e-popup-close {
    display: none;
  }
}

$theme: 'Material' !default;
$spin-overlay-background: rgba($grey-black, .4) !default;
$spin-overlay-stroke-color: $accent !default;
$spin-overlay-font-color: $grey-white !default;
$spin-material-stroke-color: $accent !default;
$spin-boot4-stroke-color: $accent !default;
$spin-boot4-stroke-width: 4 !default;
$spin-fabric-stroke-color: rgba($accent, .4) !default;
$spin-fabric-stroke-width: 1.5 !default;
$spin-fabric-arc-color: $accent !default;
$spin-bootstrap-stroke-color: $accent !default;
$spin-label-font-family: 'Roboto', Segoe UI !default;
$spin-label-font-size: 13px !default;
$spin-label-margin-top: 16px !default;
$spin-label-color: rgba($grey-light-font, .87) !default;
$spin-padding: 10px !default;
$spin-boot5-stroke-width: 4;
$spin-tailwind-stroke-width: 4.5;
$spin-boot5-stroke-color: $accent;
$spin-tailwind-arc-color: $accent;
$spin-tailwind-stroke-color: rgba($accent, .4);

@mixin boot5-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

@mixin tw-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.21, .21, .21, .21);
}

@mixin mat-spinner-rotate {
  animation: material-spinner-rotate 1568.63ms linear infinite;
}

@mixin fb-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}

@mixin boot4-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

/* stylelint-disable property-no-vendor-prefix */
@keyframes material-spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fabric-spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@include export-module('spinner-layout') {
  .e-spinner-pane {
    align-items: center;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    user-select: none;
    vertical-align: middle;
    width: 100%;
    z-index: 1000;

    &::after {
      content: $theme;
      display: none;
    }

    &.e-spin-left {
      /* stylelint-disable property-no-vendor-prefix */
      .e-spinner-inner {
        -webkit-transform: translateX(0%) translateY(-50%);
        left: 0;
        padding-left: $spin-padding;
        transform: translateX(0%) translateY(-50%);
      }
    }

    &.e-spin-right {
      .e-spinner-inner {
        -webkit-transform: translateX(-100%) translateY(-50%);
        left: 100%;
        padding-right: $spin-padding;
        transform: translateX(-100%) translateY(-50%);
      }
    }

    &.e-spin-center {
      .e-spinner-inner {
        -webkit-transform: translateX(-50%) translateY(-50%);
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    &.e-spin-hide {
      display: none;
    }

    &.e-spin-show {
      display: inline-flex;
    }

    .e-spinner-inner {
      -webkit-transform: translateX(-50%) translateY(-50%);
      left: 50%;
      margin: 0;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 1000;

      .e-spin-label {
        font-family: $spin-label-font-family;
        font-size: $spin-label-font-size;
        margin-top: $spin-label-margin-top;
        text-align: center;
      }

      .e-spin-material,
      .e-spin-material3 {
        @include mat-spinner-rotate;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
        }
      }

      .e-spin-bootstrap4 {
        @include boot4-spinner-rotate;
        border-radius: 50%;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot4-stroke-width;
        }
      }

      .e-spin-fluent,
      .e-spin-fabric {
        @include fb-spinner-rotate;
        display: block;
        margin: 0 auto;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }

      .e-spin-tailwind {
        @include tw-spinner-rotate;
        display: block;
        margin: 0 auto;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-tailwind-stroke-width;
        }
      }

      .e-spin-bootstrap5 {
        @include boot5-spinner-rotate;
        border-radius: 50%;
        display: block;
        margin: 0 auto;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot5-stroke-width;
        }
      }

      .e-spin-bootstrap {
        display: block;
        margin: 0 auto;
      }

      .e-spin-high-contrast {
        @include fb-spinner-rotate;
        display: block;
        margin: 0 auto;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }
    }
  }
}


@include export-module('spinner-theme') {
  .e-spinner-pane {
    background-color: transparent;

    &.e-spin-overlay {
      background-color: $spin-overlay-background;

      .e-spinner-inner {

        .e-spin-label {
          color: $spin-overlay-font-color;
        }

        .e-spin-bootstrap {
          fill: $spin-overlay-stroke-color;
          stroke: $spin-overlay-stroke-color;
        }
      }
    }

    .e-spinner-inner {

      .e-spin-label {
        color: $spin-label-color;
      }

      .e-spin-fluent,
      .e-spin-fabric {

        .e-path-circle {
          stroke: $spin-fabric-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-fabric-arc-color;
        }
      }

      .e-spin-tailwind {

        .e-path-circle {
          stroke: $spin-tailwind-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-tailwind-arc-color;
        }
      }

      .e-spin-bootstrap5 {
        stroke: $spin-boot5-stroke-color;
      }

      .e-spin-high-contrast {

        .e-path-circle {
          stroke: $spin-fabric-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-fabric-arc-color;
        }
      }

      .e-spin-material,
      .e-spin-material3 {
        stroke: $spin-material-stroke-color;
      }

      .e-spin-bootstrap4 {
        stroke: $spin-boot4-stroke-color;
      }

      .e-spin-bootstrap {
        fill: $spin-bootstrap-stroke-color;
        stroke: $spin-bootstrap-stroke-color;
      }
    }
  }
}

$ddl-list-line-height: 36px !default;
$ddl-header-font-weight: 600 !default;
$ddl-last-child-bottom-border: 0 !default;
$ddl-default-font-family: inherit !default;
$ddl-line-height: 48px !default;
$ddl-list-border-size: 0 !default;
$ddl-list-bottom-border: $ddl-list-border-size !default;

$ddl-list-border-color: $grey-300 !default;
$ddl-list-gradient-color: $grey-white !default;
$mention-gradient-color: $grey-white !default;
$mention-list-box-shadow-color: rgba(0, 0, 0, .21) !default;
$mention-chip-bg-color: $grey-200 !default;
$mention-chip-border-radius: 2px !default;
$mention-chip-border: none !default;
$ddl-list-bg-color: $grey-white !default;
$ddl-list-header-bg-color: $grey-50 !default;
$ddl-list-tap-color: transparent !default;
$ddl-list-header-border-color: $grey-black !default;
$ddl-nodata-font-color: $grey-black !default;
$ddl-list-default-font-color: rgba($grey-light-font, .87) !default;
$ddl-list-active-border-color: $grey-white !default;
$mention-popup-bg-color: $grey-white !default;
$ddl-list-active-font-color: $accent !default;
$mention-active-font-color: $accent !default;
$ddl-list-active-bg-color: $grey-200 !default;
$ddl-list-hover-border-color: $grey-white !default;
$ddl-list-hover-bg-color: $grey-200 !default;
$ddl-list-hover-font-color: rgba($grey-light-font, .87) !default;
$ddl-list-header-font-color: rgba($grey-light-font, .54) !default;
$ddl-list-font-size: 13px !default;
$ddl-group-list-font-size: 13px !default;
$ddl-list-font-family: inherit !default;
$ddl-default-header-font-color: rgba($grey-light-font, .54) !default;
$ddl-list-focus-color: $grey-50 !default;
$ddl-list-focus-border: 1px solid $grey-400 !default;
$ddl-group-list-padding-left: 2em !default;
$ddl-group-list-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-list-header-padding-left: 16px !default;
$ddl-list-header-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-text-indent: 16px !default;
$ddl-bigger-text-indent: $ddl-list-text-indent !default;
$ddl-list-rtl-padding-right: 0 !default;
$ddl-list-padding-right: 16px !default;
$ddl-list-rtl-padding-left: 16px !default;
$ddl-bigger-list-header-font-size: 14px !default;
$ddl-multi-column-border-width: 0 0 1px 0 !default;
$ddl-multi-column-border-color: $grey-300 !default;
$ddl-group-list-item-text-intent: 0 !default;

// Small Size

$ddl-small-icon-font-size: 14px !default;
$ddl-small-line-height: 26px !default;
$ddl-small-list-font-color: $grey-light-font !default;
$ddl-small-list-text-indent: 12px !default;

// Touch Small

$ddl-bigger-small-icon-font-size: 18px !default;
$ddl-bigger-small-line-height: 40px !default;
$ddl-bigger-small-list-font-color: $grey-light-font !default;
$ddl-bigger-small-list-text-indent: 16px !default;
$ddl-bigger-small-list-header-font-size: 13px !default;

$ddl-list-header-font-size: $ddl-group-list-font-size !default;
$ddl-small-list-header-font-size: $ddl-group-list-font-size !default;

@include export-module('dropdownbase-material') {
  .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 16px 0 0;
  }

  .e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 12px 0 0;
  }

  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding: 0 16px 0 0;
  }
}

@include export-module('dropdownbase-layout') {
  .e-bigger .e-dropdownbase,
  .e-dropdownbase.e-bigger {
    min-height: 45px;
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        line-height: $ddl-line-height;
        text-indent: $ddl-bigger-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-line-height;
        @if $skin-name != 'tailwind' {
          text-indent: $ddl-bigger-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: 20px;
      }
    }
  }

  .e-dropdownbase {
    display: block;
    height: 100%;
    min-height: 36px;
    position: relative;
    width: 100%;
    @at-root {
      #{if(&, '&', '*')} .e-list-parent {
        margin: 0;
        padding: 0;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        cursor: default;
      }

      #{if(&, '&', '*')} .e-list-item {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: 16px;
        vertical-align: middle;
      }

      #{if(&, '&', '*')} .e-fixed-head {
        position: absolute;
        top: 0;
        .e-rtl #{if(&, '&', '*')} {
          left: 33px;
        }
      }
    }
  }

  .e-dropdownbase.e-content {
    overflow: auto;
    position: relative;
  }

  #{&}.e-popup.e-ddl .e-dropdownbase.e-nodata,
  #{&}.e-popup.e-mention .e-dropdownbase.e-nodata {
    color: $ddl-nodata-font-color;
    cursor: default;
    font-family: $ddl-list-font-family;
    font-size: 14px;
    padding: 14px 16px;
    text-align: center;
  }

  .e-mention.e-popup {
    background: $mention-popup-bg-color;
    border: 0;
    box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
    margin-top: 2px;
    position: absolute;
  }

  .e-mention .e-dropdownbase .e-list-item .e-highlight {
    display: inline;
    font-weight: bold;
    vertical-align: baseline;
  }

  .e-mention .e-mention-chip,
  .e-mention .e-mention-chip:hover {
    @if $skin-name != 'Material3' {
      background: $mention-chip-bg-color;
    }
    border-radius: $mention-chip-border-radius;
    border: $mention-chip-border;
    color: $mention-active-font-color;
    cursor: default;
  }

  .e-mention .e-mention-chip::selection {
    color: $mention-gradient-color;
    background: $mention-active-font-color;
  }

  .e-mention.e-editable-element {
    border: 2px solid $ddl-list-border-color;
    height: auto;
    min-height: 120px;
    width: 100%;
  }

  .e-form-mirror-div {
    white-space: pre-wrap;
  }

  .e-bigger.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-list-nodata-font-size;
    }
  }

  .e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-small-list-nodata-font-size;
    }
  }

  .e-bigger.e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger.e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-small-list-nodata-font-size;
    }
  }

  .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }

  .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-padding-left;
    text-indent: 0;
  }

  .e-small .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: 0;
    }
  }

  .e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: 0;
    }
  }

  .e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: 0;
    }
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    text-indent: $ddl-group-list-item-text-intent;
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    cursor: pointer;
    font-weight: normal;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
      font-weight: 500;
    }
  }

  .e-rtl.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }
}


@include export-module('dropdownbase-theme') {
  .e-rtl {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-padding-left;
        }
      }
    }
  }

  // Rtl small size

  .e-small.e-rtl,
  .e-small .e-rtl,
  .e-rtl .e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-small-padding-left;
        }
      }
    }
  }

  // Rtl bigger size

  .e-bigger.e-rtl,
  .e-bigger .e-rtl,
  .e-rtl .e-bigger {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-padding-left;
        }
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-padding-left;
        }
      }
    }
  }

  // Rtl bigger small size

  .e-small.e-bigger.e-rtl,
  .e-small.e-bigger .e-rtl,
  .e-rtl .e-small.e-bigger,
  .e-small .e-rtl.e-bigger,
  .e-bigger .e-rtl.e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-small-padding-left;
        }
      }
    }
  }

  .e-dropdownbase {
    border-color: $ddl-list-border-color;
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-tap-highlight-color: $ddl-list-tap-color;
        border-bottom: $ddl-list-bottom-border;
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-default-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-font-size;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-right: $ddl-list-padding-right;
        text-indent: $ddl-list-text-indent;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      .e-fixed-head {
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-header-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-header-font-size;
        font-weight: $ddl-header-font-weight;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-left: $ddl-list-header-padding-left;
        padding-right: $ddl-list-padding-right;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active,
      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
        @if $skin-name == 'Material3' {
          background: $ddl-list-active-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-active-bg-color;
        }
        border-color: $ddl-list-active-border-color;
        color: $ddl-list-active-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        @if $skin-name == 'Material3' {
          background: $ddl-list-hover-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-hover-bg-color;
        }
        border-color: $ddl-list-hover-border-color;
        color: $ddl-list-hover-font-color;
      }

      #{if(&, '&', '*')} .e-list-item:active {
        @if $skin-name == 'Material3' {
          background: $ddl-list-pressed-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item:last-child {
        border-bottom: $ddl-last-child-bottom-border;
      }

      #{if(&, '&', '*')} .e-list-item.e-item-focus {
        @if $skin-name == 'Material3' {
          background: $ddl-list-focus-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-hover-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
        @if ($skin-name == 'bootstrap5') {
          border-radius: 2px;
        }
      }
    }
  }

  .e-bigger .e-dropdownbase {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-list-header-font-size;
        padding-left: $ddl-list-header-bigger-padding-left;
      }
    }
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open td {
    display: table-cell;
    overflow: hidden;
    padding-right: 16px;
    text-indent: 10px;
    text-overflow: ellipsis;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th {
    line-height: 36px;
    text-align: left;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-color: $ddl-multi-column-border-color;
    border-style: solid;
    border-width: $ddl-multi-column-border-width;
    color: $ddl-list-header-font-color;
    font-family: $ddl-list-font-family;
    font-size: $ddl-group-list-font-size;
    font-weight: $ddl-header-font-weight;
    text-indent: 10px;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-dropdownbase .e-list-item {
    padding-right: 0;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-scroller .e-ddl-header {
    padding-right: 16px;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-ddl-device .e-ddl-header {
    padding-right: 0;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-center {
    text-align: center;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-right {
    text-align: right;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-left {
    text-align: left;
  }

  // small size
  .e-small .e-dropdownbase,
  .e-dropdownbase.e-small {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-small-list-font-color;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        text-indent: $ddl-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-small-list-header-font-size;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        padding-left: $ddl-list-header-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-small-icon-font-size;
      }
    }
  }

  // Bigger small size

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-small.e-bigger {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-bigger-small-list-font-color;
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        text-indent: $ddl-bigger-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        padding-left: $ddl-list-header-bigger-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-bigger-small-icon-font-size;
      }
    }
  }

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-bigger.e-small  {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-small-list-header-font-size;
      }
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-bottom: $ddl-list-bottom-border;
    border-color: $ddl-list-gradient-color;
    color: $ddl-list-default-font-color;
    font-family: $ddl-list-font-family;
    text-indent: $ddl-list-text-indent;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $ddl-list-header-font-color;
    }
    @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
      font-size: $ddl-list-font-size;
      padding-right: $ddl-list-padding-right;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active,
  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-active-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-active-bg-color;
    }
    border-color: $ddl-list-active-border-color;
    color: $ddl-list-active-font-color;
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
    border-color: $ddl-list-hover-border-color;
    color: $ddl-list-hover-font-color;
    @if $skin-name == 'FluentUI' {
      color: $ddl-list-header-font-color;
    }
  }

  .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      color: $ddl-list-icon-color;
    }
  }

  .e-selectall-parent.e-item-focus{
    background-color: $ddl-list-hover-bg-color;
  }
}

//default
//enddefault
