.search-bar
  position: relative
  +grid-height-s
  @extend %clearfix

  // Bar
  input[type="search"]
    display: block
    position: absolute
    top: 0
    left: 0
    padding-top: 0
    padding-bottom: 0
    +grid-padding($left: .2, $right: 1)
    width: 100%
    +grid-height-s
    border: 1px solid #D6CFC9
    +border-left-radius($border-radius)
    font-size: 1.4em
    -webkit-appearance: none
    +transition(box-shadow 500ms ease)

    &:focus
      outline: none
      border-color: #9ecaed
      box-shadow: 0 0 10px #9ecaed

  // Button
  .search-submit
    display: block
    position: absolute
    top: 0
    right: 0
    background: $blue
    overflow: hidden
    +grid-width-s
    +grid-height-s
    +border-right-radius($border-radius)
    +transition(background 150ms ease-out)

    &:hover
      background: #008BFF

    input
      position: relative
      z-index: 10
      background: transparent



  .home #header .white-bar  &
    display: none

  // Suggenstions

  ul.dropdown-menu
    position: absolute
    width: 100%
    +grid-line-height-s
    background-color: #ffffff
    border: 1px solid #ccc
    border-top: none
    +border-bottom-radius(4px)
    z-index: 50

    list-style: none
    margin: 0
    padding: 0

    font-size: 14px

    li
      margin: 0
      padding: 0
      +grid-line-height-s
      white-space: nowrap
      overflow: hidden
      &::before
        content: none

      a
        display: block
        width: 100%
        height: 100%
        padding-left: 10px
        padding-right: 10px
        color: #646464
        .article_number
          color: $light_grey
          font-size: 1.0em
          font-size: 0.8em
          vertical-align: bottom
      &:hover
        cursor: pointer

      &.active a
        background-color: #00A6FF
        color: #fff


  .search-suggest
    position: absolute
    width: 100%
    +grid-line-height-s
    +grid-size(margin-top, 2)
    background-color: #ffffff
    border: 1px solid #ccc
    border-top: none
    +border-bottom-radius(4px)
    z-index: 50
    max-height: 300px
    overflow: auto

    ul
      list-style: none
      margin: 0
      padding: 0

      li
        margin: 0
        padding: 0
        +grid-line-height-s
        white-space: nowrap
        overflow: hidden

        a
          display: block
          width: 100%
          height: 100%
          padding-left: 10px
          padding-right: 10px
          color: #646464

          &:hover, &.active
            background-color: #00A6FF
            color: #fff

        .name
          font-weight: normal // bold
        .blue
          color: #00A6FF
        a:hover .blue
          color: #ffffff

.typeahead-group-header
  padding: 0px 10px
  background-color: #eeeeee
  font-family: "Proxima N W01 Reg", sans-serif
  text-transform: uppercase
  font-size: 12px
  line-height: 20px
  &::before
    content: none

a.searchAll
  border-top: solid 1px #eeeeee
  font-style: italic
  padding-top: 3px
  padding-bottom: 3px
a.searchAll span
  color: #00A6FF
a.searchAll:hover span
  color: #ffffff

//NEW STYLING FOR MOBILE
.search-bar-mobile
  background-color: $mobileGray
  height: 40px
  padding: 3px
  .search-bar
    height: 34px
    .typeahead-group-header
      +regular
    ul
      a
        text-decoration: none
        +regular
    input[type="search"]
      height: 34px
      border-color: $mobileBorderColor
      font-size: 16px
      line-height: 34px
      padding-left: 16px
      +regular
      &:focus
        outline: none
        border-color: #9ecaed
        box-shadow: 0 0 10px #9ecaed

    .search-submit
      width: 34px
      height: 34px
      background-color: transparent
      +flex(center, center)
      .magnifier
        +icon-sprite-mobile(-90px -90px, 20px, 20px)