@import (reference) '../../../Style/App.less';

@search-icon-width: 25px;

.Search {
  & > .form-group {
    margin: 0;
    position: relative;

    & > .form-control {
      padding-right: @search-icon-width * 2;

      // edge annoyingly auto adds a clear button to inputs
      // since search provides its own we will tell edge to stop this behaviour
      &::-ms-clear {
        display: none;
      }
    }

    & > .Search-icon {
      display: block;
      height: @input-height-base;
      line-height: @input-height-base;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: @search-icon-width;

      &.Search-pendingIcon,
      &.Search-clearIcon {
        right: @search-icon-width;
      }
    }
  }
}