@import "flags"

.search-bar .search-submit .magnifier
  background-image: none

header
  .call-language-bar
    height: 40px
    width: 100%
    padding: 0 18px
    +flex(space-between, center)

    .call
      +regular
      color: $blue
      font-size: 15px
      line-height: 18px

      a
        +regular
        color: $blue
        text-decoration: none
        font-size: 15px
        line-height: 18px

        &:before
          content: ''
          display: inline-block
          margin-right: 20px
          +icon-sprite-mobile(-130px -70px, 12px, 12px)

    .flag-drop-down
      margin: 0
      top: 0
      float: none
      height: 40px
      width: 30px
      border: none
      .button-open
        &:after
          display: none

      ul
        height: 40px
        max-height: none
        overflow: visible

        li
          background-color: transparent
          opacity: 0
          height: 40px
          position: absolute
          top: 0
          border: none
          left: 0
          transition: all 0.3s
          &:first-of-type
            opacity: 1
          .flag
            position: relative
            left: 0
            top: 0
            margin: 0
          a
            text-align: center
            +flex(center, center)
            span
              display: inline-block

      &.open
        ul
          li
            opacity: 1
            &:nth-of-type(3)
              left: -60px
            &:nth-of-type(2)
              left: -30px
            &:nth-of-type(1)
              left: -0px
  .blue-mobile-bar
    background-color: $blue
    +flex(space-between, center)
    height: 40px
    .link-content
      +flex(space-between, center)
    .toggle-menu
      width: 50px
      height: 40px
      +flex(center, center)
      &:after
        content: ''
        display: block
        +icon-sprite-mobile(-90px -10px, 18px, 12px)

    .business
      +bold
      font-size: 18px
      line-height: 21px
      color: white

    .cart
      padding-right: 13px
      +flex(space-between, center)
      text-decoration: none
      position: relative
      height: 100% 
      .icon
        display: block
        +icon-sprite-mobile(-115px -90px, 24px, 22px)
        margin-right: 10px
      .quantity
        position: absolute
        +semibold
        color: white
        background-color: #EC2227
        border: 2px solid darken(#EC2227, 8%)
        border-radius: 9999px
        font-size: 13px
        width: 22px
        height: 22px
        right: 6px
        top: 3px
        +flex(center, center)
        &[data-amount='0']
          display: none
    &.sticky-bar
      position: fixed
      width: 100%
      top: 0
      left: 0
      z-index: 10
      -webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.0)
      -moz-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.0)
      box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.0)
      +translate3d(0, -100%, 0)
      +transition(all 0.4s)
      &.show
        +translate3d(0,0,0)
        -webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2)
        -moz-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2)
        box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2)
  .reference-bar
    height: 80px
    padding: 15px 0
    .reviews
      height: 100%
      +flex(space-between, center)
      padding: 0 16px
      text-decoration: none

      .stars-container
        +flex(flex-start, center)
        .grade
          +semibold
          font-size: 15px
          line-height: 18px
          color: black
          margin: 0
        .stars
          display: inline-block
          margin-left: 8px
          .star
            display: inline-block
            height: 16px
            +icon-sprite-mobile(-50px -10px, 17px, 16px)
            width: 17px
            &.half
              +icon-sprite-mobile(-30px -10px, 17px, 16px)

            &.full
              +icon-sprite-mobile(-10px -10px, 17px, 16px)

      .recommendation
        +semibold
        font-size: 15px
        line-height: 18px
        color: $green
        +flex(flex-start, center)
        &:before
          content: ''
          display: inline-block
          margin-right: 10px
          +icon-sprite-mobile(-10px -90px, 16px, 16px)


+media-query(360px)
  header
    .reference-bar
      .reviews
        display: block
        text-align: center

        .stars-container, .recommendation
          +flex(center, center)
        .stars-container
          margin-bottom: 8px