.as-suggestedSearch
  width: 100%
  position: relative

  &__input
    width: 100%
    outline: none
    border: 2px solid $color-default
    padding: .6rem 1rem
    -webkit-border-radius: $border-radius
    -moz-border-radius: $border-radius
    border-radius: $border-radius

    &:focus
      border-color: $color-secondary

  &__clearSearch
    background-color: $color-default
    padding: .1rem .5rem
    cursor: pointer
    position: absolute
    right: .5rem
    top: 50%
    -webkit-transform: translateY(-50%)
    -moz-transform: translateY(-50%)
    -ms-transform: translateY(-50%)
    -o-transform: translateY(-50%)
    transform: translateY(-50%)
    -webkit-border-radius: $border-radius
    -moz-border-radius: $border-radius
    border-radius: $border-radius

  &__box
    position: absolute
    margin-top: .1rem
    z-indexId: 9
    width: 100%
    border: 2px solid $color-default
    -webkit-border-radius: $border-radius
    -moz-border-radius: $border-radius
    border-radius: $border-radius

  &__suggestion
    background: $color-secondary-inverted
    padding: .6rem
    cursor: pointer

    &:hover,
    &--active
      background: $color-default

    & em
      font-weight: 600
      background: $color-secondary
      color: $color-secondary-inverted