@use "../../../2-tools/tools-index";

@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"] {
    color: var(--gray-color);
    min-height: var(--form-ele-medium);
    border-radius: var(--radius-small);
    box-sizing: border-box;
    border: 1px solid var(--gray-color);
    width: 100%;
    padding: 0 var(--spacing-xs);
    background-color: white;

    @include tools-index.form-ele-hover-medium;
    @include tools-index.form-ele-focus;

    &:disabled {
      background-color: var(--disabled-gray);
      cursor: not-allowed;
    }

    &[aria-invalid="true"]:not(.inside-invalid-wrapper) {
      border: 2px solid var(--danger-color);
    }

    &.text-input {
      &--clear-icon-visible {
        padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
      }
    }
  }
  .text-input {
    &__inner-wrapper {
      position: relative;
    }
    &__clear-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: var(--spacing-xs);
      font-weight: var(--font-weight-normal);
      transition: transform;
      [class*="utds-icon-before-"]::before {
        font-size: 0.7rem;
      }
      &[disabled]:active {
        transform: translateY(-50%);
      }
    }
  }
  .search-input {
    &__wrapper {
      position: relative;
      input[type="text"] {
        border-radius: var(--radius-circle);
        margin: 0;
        padding: var(--spacing-s) 170px var(--spacing-s) var(--spacing-3xl);
      }
    }
    &__button-wrapper {
      position: absolute;
      right: var(--spacing-xs);
      &:has(button:focus) {
        clip: unset;
        height: unset;
        margin: unset;
        overflow: unset;
        padding: unset;
        position: absolute;
        width: unset;
      }
    }
    &__icon-search {
      position: absolute;
      top: calc(50% + 2px);
      left: var(--spacing);
      &[class*=utds-icon-before-]::before {
        display: block;
        font-size: 1.2rem;
      }
    }
  }
}