:host {
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }

  .usinput {
    font-style: normal;
    width: 100%;
    display: inline-flex;
    flex-direction: column;

    &:hover {
      .usinput__label {
        color: var(--input-hover-label-color);
      }
    }

    &:focus-within {
      .usinput__label {
        color: var(--input-focus-label-color);
      }
    }

    .search-icon {
      position: absolute;
      right: var(--input-h-padding);
      display: flex;
      align-items: center;
      height: 100%;
      color: var(--input-icon-color);
      cursor: pointer;
    }

    &.usinput_disabled {
      .search-icon {
        color: var(--input-disabled-icon-color);
        pointer-events: none;
      }

      .usinput__label {
        color: var(--input-disabled-label-color);
      }

      .usinput__icon {
        color: var(--input-disabled-icon-color);
        pointer-events: none;
      }
    }

    &.usinput_error {
      .usinput__label {
        color: var(--input-error-label-color);
      }
    }

    &.usinput_active {
      .usinput__input {
        border-color: var(--input-focus-border-color);
        box-shadow: var(--input-focus-inner-shadow);
        color: var(--input-focus-font-color);
        background-color: var(--input-focus-bg-color);
      }

      .usinput__icon {
        color: var(--input-focus-icon-color);
      }
    }

    &.usinput_hovered {
      .usinput__input {
        border-color: var(--input-hover-border-color);
        color: var(--input-hover-font-color);
        background-color: var(--input-hover-bg-color);
        cursor: pointer !important;
      }
    }

    us-tooltip {
      display: flex;
    }

    .usinput__tooltip-icon {
      display: flex;
      color: var(--color-text-700);
    }

    .usinput__label {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font: var(--input-label-font);
      padding-bottom: var(--input-margins);
      color: var(--input-label-color);
      background: transparent;

      .usinput__label-text {
        padding-top: var(--space-inline-s);
      }

      .info {
        margin-left: auto;
      }

      &.label_hide {
        display: none;
      }
    }

    .usinput__range {
      display: flex;
      gap: 0 var(--space-inline-m);
    }

    .usinput__hint {
      display: inline-block;
      font: var(--text-p-s-light);
      color: var(--input-label-color);
      margin-top: var(--input-margins);
    }

    .usinput__icon {
      position: absolute;
      right: var(--input-h-padding);
      display: flex;
      align-items: center;
      height: 100%;
      color: var(--input-icon-color);

      &_clear {
        display: none;
        cursor: pointer;
      }

      &_eye {
        cursor: pointer;
      }
    }

    .usinput__container {
      position: relative;
      flex-grow: 1;

      &:hover {
        .usinput__input,
        .usinput__textarea {
          &:not(.input_disabled):not(.input_readonly):not(.input__error):not(.input_inbuilt) {
            border-color: var(--input-hover-border-color);
            color: var(--input-hover-font-color);
            background-color: var(--input-hover-bg-color);
          }
        }
      }

      &:not(.usinput__container_readonly):not(.usinput__container_disabled):not(.usinput__container_inbuilt):hover {
        .usinput__icon_clear.usinput__icon_with-value {
          display: flex;
          color: var(--input-icon-color);
          pointer-events: auto;
        }
        .usinput__icon_eye {
          display: flex;
          color: var(--input-icon-color);
          pointer-events: auto;
        }
      }

      &:not(.usinput__container_readonly):not(.usinput__container_disabled):not(.usinput__container_inbuilt):focus-within {
        .search-icon:not(.search-icon_close) {
          color: var(--input-focus-icon-color);
        }

        .usinput__icon {
          color: var(--input-focus-icon-color);
          pointer-events: none;
        }

        .usinput__icon_clear.usinput__icon_with-value {
          display: flex;
          color: var(--input-icon-color);
          pointer-events: auto;
        }
        .usinput__icon_eye {
          display: flex;
          color: var(--input-icon-color);
          pointer-events: auto;
        }
      }

      &_textarea {
        .usinput__icon {
          top: var(--input-v-padding);
          height: auto;
        }
      }
    }

    .usinput__input,
    .usinput__textarea {
      display: block;
      width: 100%;
      border-width: var(--input-border-width);
      border-color: var(--input-border-color);
      font: var(--text-p-m-light);
      color: var(--input-font-color);
      padding: calc(var(--input-v-padding) - var(--input-border-width))
        calc(var(--input-h-padding) - var(--input-border-width) + 16px)
        calc(var(--input-v-padding) - var(--input-border-width))
        calc(var(--input-h-padding) - var(--input-border-width));
      background: var(--input-bg-color);
      border-radius: var(--input-border-radius);
      outline: none;
      text-overflow: ellipsis;

      &:not(.input_disabled):not(.input_inbuilt):focus,
      &:not(.input_disabled):not(.input_inbuilt):focus-visible,
      &:not(.input_disabled):not(.input_inbuilt):focus-within {
        color: var(--input-focus-font-color) !important;
        background-color: var(--input-focus-bg-color) !important;
        border-color: var(--input-focus-border-color) !important;
        box-shadow: var(--input-focus-inner-shadow) !important;
      }

      &:not(.input_disabled):not(.input_inbuilt):read-only {
        cursor: default;
      }

      &::placeholder {
        color: var(--input-placeholder-color);
      }

      &.input_disabled {
        color: var(--input-disabled-font-color);
        background: var(--input-disabled-bg-color);
        border-color: var(--input-disabled-border-color);
        cursor: default;
      }

      &.input_inbuilt {
        border-width: 0px;
        background: transparent;
        padding-right: calc(var(--input-h-padding) - var(--input-border-width));

        &.input_readonly {
          cursor: pointer;
        }
      }

      &.input__error {
        border-color: var(--input-error-border-color);
        box-shadow: var(--input-error-inner-shadow);
        color: var(--input-error-font-color);
        background: var(--input-error-bg-color);

        &:not(.input_disabled):hover {
          border-color: var(--input-error-border-color);
        }

        &:not(.input_disabled):not(.input_readonly):not(.input_inbuilt):focus,
        &:not(.input_disabled):not(.input_readonly):not(.input_inbuilt):focus-visible,
        &:not(.input_disabled):not(.input_readonly):not(.input_inbuilt):focus-within {
          border-color: var(--input-error-border-color);
          background: var(--input-error-bg-color);
          box-shadow: var(--input-error-inner-shadow);
        }
      }

      &.datepicker_pointer:not(.input_disabled):not(.input_inbuilt):read-only {
        cursor: pointer !important;
      }
    }

    .usinput__textarea {
      resize: none;
      max-height: 360px;

      &::-webkit-scrollbar {
        width: 10px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--color-neutral-600);
        background-clip: padding-box;
        border-radius: var(--border-radius-l);
        border: 3px solid rgba(0, 0, 0, 0);
        opacity: 0.5;
      }
    }

    .usinput__errors {
      margin-top: var(--input-margins);

      &-container {
        color: var(--input-error-message-font-color);
        display: flex;
        align-items: flex-start;
        gap: 0 var(--space-inline-s);
      }

      &-text {
        color: var(--input-error-message-font-color);
      }

      &.usinput__errors_hide {
        display: none;
      }
    }

    .counter {
      align-self: flex-end;
      margin-top: var(--space-inner-m);
      font: var(--text-p-m-light);
      color: var(--color-text-900);

      &_error {
        color: var(--color-danger-1000);
      }
    }
  }
}