// Imports Project Config File with wariables/mixins/functions
@import "../../assets/scss/config";
@import "../../assets/scss/icofont";

// Input and floating label style
.es-input {
  @extend %input-wrap;

  label {
    @extend %label;
  }

  label.grey {
    background: es-color(black, 2);
  }

  input,
  select {
    @extend %input;
  }

  input:focus,
  select:focus {
    @extend %input-focus;
  }

  input:focus + label.es-label,
  select:focus + label.es-label {
    @extend %label-focus;
  }

  input:focus + label.es-input-label,
  select:focus + label.es-input-label {
    @extend %label-focus;
  }

  // After input field is edited and have text inside it
  label.es-label-full {
    @extend %label-focus;
    color: es-color(black, 6);
    z-index: 4;
  }
}

// For input field while editing
.es-input-focused {
  @extend %input-wrap;
  input {
    @extend %input-focus;
  }
  select {
    @extend %input-focus;
  }
  label {
    @extend %label-focus;
  }
}

//Adding Search Icon
.es-search {
  &:before {
    @include es-icon(
      icon-search,
      16px,
      absolute,
      $position: (right: 10px, top: 8px)
    );
  }
}

//Adding Select Icon
.es-select-icon {
  &:before {
    @include es-icon(
      icon-arrow-up-down,
      10px,
      absolute,
      $position: (right: 10px, top: 12px)
    );
  }
}