@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.formLabel {
  position: absolute;
  svg {
    // height: $input-height;
    // width: $input-height;
    height: 20px;
    width: 20px;
    fill: $charcoal-grey;
    padding: $padding;
    fill-opacity: 0.5;
  }
}

.searchField {
  composes: field from "../../Sass/common/_form.scss";
  font-family: $font-base;
}

.searchData {
  position: relative;
  width: 100%;
}

input[type="text"].searchField {
  padding-left: $input-height;
  padding-right: $input-height;
  color: $text-dark;
  width: 100%;
  overflow: hidden;
  border-color: transparent; // if you need to remove borders, always use transparent "X"px borders instead of 0 borders for a11y
  @include placeholder {
    text-align: center;
    @include transition(all, 0.25s, linear);
  }

  &:focus {
    @include placeholder {
      padding-left: 0;
    }
  }
}

.searchClear {
  composes: btn from "../../Sass/common/_buttons.scss";
  right: 0px;
  top: 0px;
  position: absolute;
  height: $input-height;
  width: $input-height;
  svg {
    height: 15px;
    width: 15px;
    margin: 0 auto;
    fill: $charcoal-grey;
    fill-opacity: 0.5;
  }
}