@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(input) {
  color: getCssVarWebex('text', 'primary', 'normal');
  @include e(inner) {
    background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    border-color: getCssVarWebex('outline', 'input', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
    &::placeholder {
      color: getCssVarWebex('text', 'secondary', 'normal');
    }
    &:hover {
      background-color: getCssVarWebex('background', 'primary', 'hover');
    }
    &:focus {
      background-color: getCssVarWebex('background', 'primary', 'hover');
      box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
    }
  }
  @include e(icon) {
    color: getCssVarWebex('text', 'secondary', 'normal');
    &:hover {
    }
    &.disableFocusIcon{
      cursor: not-allowed;
      &:hover {
        color: getCssVarWebex('text', 'primary', 'normal');
      }
    }
  }
  @include when(disabled) {
    .el-input__inner, el-textarea__inner {
      background-color: getCssVarWebex('background', 'secondary', 'normal');
      color: getCssVarWebex('text', 'primary', 'disabled');
      border: none;

      &::placeholder {
        color: getCssVarWebex('text', 'primary', 'disabled');
      }
    }
  }
}

@include b(textarea) {
  @include e(inner) {
    background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    border-color: getCssVarWebex('outline', 'input', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
    &::placeholder {
      color: getCssVarWebex('text', 'secondary', 'normal');
    }
    &:hover {
      background-color: getCssVarWebex('background', 'primary', 'hover');
    }
    &:focus {
      background-color: getCssVarWebex('background', 'primary', 'hover');
      box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
    }
  }
}


.search-input .el-input__inner {
  background-color: getCssVarWebex('background', 'secondary', 'normal');
  &:hover, &:active {
    background-color: getCssVarWebex('background', 'secondary', 'hover');
  }
  &:active {
    box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
  }
}

@include b(tag-input) {
  border-color: getCssVarWebex('outline', 'input', 'normal');
  border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
  @include e(tag) {
    color: getCssVarWebex('text', 'inverted', 'normal');
    background-color: getCssVarWebex('button', 'primary', 'normal');
    &.__error {
      background-color: getCssVarWebex('background', 'alert', 'error', 'normal');
      color: getCssVarWebex('text', 'error', 'normal');
    }
    &.__warn {
      background-color: getCssVarWebex('background', 'alert', 'warning', 'normal');
      color: getCssVarWebex('text', 'warning', 'normal');
    }
  }
  @include e(tags__wrap) {
      & .__input {
        background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
        color: getCssVarWebex('text', 'primary', 'normal');
        &::placeholder {
          color: getCssVarWebex('text', 'secondary', 'normal');
        }
      }
  }
  &:hover {
    background-color: getCssVarWebex('background', 'primary', 'hover');
  }
  &:focus {
    background-color: getCssVarWebex('background', 'primary', 'hover');
    box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
  }
}

@include b(input-number) {
  @include e(decrease) {
    color: getCssVarWebex('text', 'secondary', 'normal');
    &:focus, &:hover {
      color: getCssVarWebex('text', 'primary', 'normal');
    }
  }
  @include e(increase) {
    color: getCssVarWebex('text', 'secondary', 'increase');
    &:focus, &:hover {
      color: getCssVarWebex('text', 'primary', 'normal');
    }
  }
}
@include b(autocomplete-suggestion) {
  @include e(wrap) {
    background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
    border-color: getCssVarWebex('outline', 'secondary', 'normal');
    color: getCssVarWebex('text', 'primary', 'normal');
    border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
  }
  li {
    border-radius: getCssVarWebexCom('border', 'radius', 'core', 'medium');
    color: getCssVarWebex('text', 'primary', 'normal');
    &::placeholder {
      color: getCssVarWebex('text', 'secondary', 'normal');
    }
    &:hover {
      background-color: getCssVarWebex('background', 'primary', 'hover');
    }
    &:focus {
      background-color: getCssVarWebex('background', 'primary', 'hover');
      box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
    }
    &.highlighted {
      background-color: getCssVarWebex('background', 'primary', 'hover');
      box-shadow: 0px 0px 0px 2px getCssVarWebex('background', 'solid', 'primary', 'normal'), 0px 0px 0px 5px rgba(17, 112, 207, 0.3), 0px 0px 0px 4px getCssVarWebex('outline', 'theme', 'normal');
      color: getCssVarWebex('text', 'primary', 'normal');
    }
  }
}

.float-input-label {
  color: var(--color-gray-70);
}
.float-input.focused label,
.float-input input:focus ~ label
{
  color: getCssVarWebex('text', 'primary', 'normal');
  background-color: getCssVarWebex('background', 'solid', 'primary', 'normal');
}
