// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

.#{$grommet-namespace}search {
  display: inline-block;

  &:focus {
    outline: none;
    margin: -1px;
    border: 1px solid $focus-border-color;
    box-shadow: 0 0 1px 1px $focus-border-color;
  }
}

.#{$grommet-namespace}search--controlled {
  cursor: pointer;
}

.#{$grommet-namespace}search__input {
  margin-right: 0px;
  @include input();

  // Disable IE's clear icon
  &::-ms-clear {
    display: none;
  }

  #{$dark-background-context} {
    border-color: $colored-border-color;

    &:focus {
      border-color: $focus-border-color;
    }
  }

  #{$light-background-context} {
    border-color: $border-color;

    &:focus {
      border-color: $focus-border-color;
    }
  }
}

.#{$grommet-namespace}search__drop {
  @include inuit-font-size($inuit-heading-size-4, inherit);

  @include media-query(palm) {
    max-width: 100%;
    width: 100vw;
  }

  input {
    margin-right: 0px;
    box-sizing: border-box;
    width: 100%;
    padding: halve($inuit-base-spacing-unit);

    @include media-query(palm) {
      width: calc(100vw - #{round($inuit-base-spacing-unit * 3)});
    }

    &:focus {
      padding: (halve($inuit-base-spacing-unit) - $input-border-width);
    }
  }

  .#{$grommet-namespace}search__suggestion {
    padding: quarter($inuit-base-spacing-unit) $inuit-base-spacing-unit;
    cursor: pointer;
    outline: none;

    // limit width of suggestions so that search icon + input do not wrap
    // for long suggestions
    @include media-query(palm) {
      width: 100vw;
    }

    &:hover,
    &--active {
      background-color: $hover-background-color;
    }
  }
}

.#{$grommet-namespace}search__drop-control {
  vertical-align: top;
  height: double($inuit-base-spacing-unit);
}

.#{$grommet-namespace}search__drop--controlled {
  .#{$grommet-namespace}search__drop-contents {
    display: inline-block;
  }
}

.#{$grommet-namespace}search__drop--large {
  line-height: quadruple($inuit-base-spacing-unit);
}

.#{$grommet-namespace}search--inline {
  position: relative;

  .#{$grommet-namespace}search__input {
    width: 100%;
    box-sizing:  border-box;
    padding-left: (halve($inuit-base-spacing-unit) - $input-border-width);
    padding-right: (double($inuit-base-spacing-unit) - $input-border-width);
    padding-top: halve($inuit-base-spacing-unit);
    padding-bottom: halve($inuit-base-spacing-unit);
    border-radius: 0;
    -webkit-appearance: none;

    &:focus {
      padding-left: (halve($inuit-base-spacing-unit) - ($input-border-width + 1));
      padding-right: (double($inuit-base-spacing-unit) - ($input-border-width + 1));
      padding-top: (halve($inuit-base-spacing-unit) - $input-border-width);
      padding-bottom: (halve($inuit-base-spacing-unit) - $input-border-width);
    }

    html.rtl & {
      padding-right: (halve($inuit-base-spacing-unit) - $input-border-width);
      padding-left: (double($inuit-base-spacing-unit) - $input-border-width);

      &:focus {
        padding-right: (halve($inuit-base-spacing-unit) - $input-border-width);
        padding-left: (double($inuit-base-spacing-unit) - ($input-border-width + 1));
      }
    }

    .#{$grommet-namespace}header &:not(:focus) {
      border-color: transparent;
    }
  }

  .#{$grommet-namespace}control-icon-search {
    position: absolute;
    right: halve($inuit-base-spacing-unit);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;

    html.rtl & {
      right: auto;
      left: halve($inuit-base-spacing-unit);
    }
  }
}

.#{$grommet-namespace}search--small {
  .#{$grommet-namespace}search__input {
    @include inuit-font-size($input-small-font-size, normal);
    padding: (($inuit-base-spacing-unit - $control-font-size) - $input-border-width)
      ($control-font-size - $input-border-width);
    padding-right: ($inuit-base-spacing-unit - $input-border-width);

    &:focus {
      padding: (($inuit-base-spacing-unit - $control-font-size) - $input-focus-border-width)
        ($control-font-size - $input-focus-border-width);
      padding-right: ($inuit-base-spacing-unit - $input-focus-border-width);
    }
  }
}

.#{$grommet-namespace}search--medium {
  .#{$grommet-namespace}search__input {
    @include inuit-font-size($input-medium-font-size, normal);
  }
}

.#{$grommet-namespace}search--large {
  .#{$grommet-namespace}search__input {
    @include inuit-font-size($input-large-font-size, normal);
    padding: halve($inuit-base-spacing-unit) ($inuit-base-spacing-unit);
    padding-right: ($inuit-base-spacing-unit * 3);

    &:focus {
      padding: (halve($inuit-base-spacing-unit) - $input-border-width)
        ($inuit-base-spacing-unit * 3 - $input-border-width);
      padding-left: ($inuit-base-spacing-unit - $input-border-width);

      @include media-query(palm) {
        padding: (halve($inuit-base-spacing-unit) - ($input-border-width + 1))
          ($inuit-base-spacing-unit - ($input-border-width + 1));
        padding-right: (double($inuit-base-spacing-unit) - ($input-border-width + 1));
      }
    }

    @include media-query(palm) {
      font-size: inherit;
      padding: (halve($inuit-base-spacing-unit) - ($input-border-width))
        ($inuit-base-spacing-unit - $input-border-width);
      padding-right: (double($inuit-base-spacing-unit) - $input-border-width);
      line-height: 1.5;
    }
  }

  .#{$grommet-namespace}control-icon-search {
    right: $inuit-base-spacing-unit;
    width: double($inuit-base-spacing-unit);
    height: double($inuit-base-spacing-unit);

    @include media-query(palm) {
      right: halve($inuit-base-spacing-unit);
      width: $inuit-base-spacing-unit;
      height: $inuit-base-spacing-unit;
    }

    @include media-query(lap-and-up) {
      // prevent icon from growing on resize from 719px
      transition: none;
    }
  }
}

.#{$grommet-namespace}search--icon-align-start {
  &.#{$grommet-namespace}search--inline {
    .#{$grommet-namespace}search__input {
      padding-left: (double($inuit-base-spacing-unit) - $input-border-width);
      padding-right: ($inuit-base-spacing-unit - $input-border-width);

      &:focus {
        padding-left: (double($inuit-base-spacing-unit) - ($input-border-width + 1));
        padding-right: ($inuit-base-spacing-unit - $input-border-width);
      }
    }

    .#{$grommet-namespace}control-icon-search {
      left: halve($inuit-base-spacing-unit);
    }
  }

  &.#{$grommet-namespace}search--large {
    .#{$grommet-namespace}search__input {
      padding-left: ($inuit-base-spacing-unit * 3);
      padding-right: $inuit-base-spacing-unit;

      &:focus {
        padding-left: ($inuit-base-spacing-unit * 3 - $input-border-width);
        padding-right: ($inuit-base-spacing-unit - $input-border-width);

        @include media-query(palm) {
          padding: (halve($inuit-base-spacing-unit) - ($input-border-width + 1))
            ($inuit-base-spacing-unit - ($input-border-width + 1));
          padding-left: (double($inuit-base-spacing-unit) - ($input-border-width + 1));
        }
      }

      @include media-query(palm) {
        padding: (halve($inuit-base-spacing-unit) - $input-border-width)
        ($inuit-base-spacing-unit - $input-border-width);
        padding-left: (double($inuit-base-spacing-unit) - $input-border-width);
      }
    }
  }
}

.#{$grommet-namespace}search--fill {
  // width: 100%;
  max-width: none;
  //used to add full height for button inside a flex container
  flex-grow: 1;
}

.#{$grommet-namespace}search--pad-medium.#{$grommet-namespace}search--inline {
  .#{$grommet-namespace}search__input {
    padding-left: ($inuit-base-spacing-unit - $input-border-width);
    padding-right: ($inuit-base-spacing-unit - $input-border-width);
  }

  .#{$grommet-namespace}control-icon-search {
    right: $inuit-base-spacing-unit;
  }
}