$width:570
$padding_side: 20

.filter-info
  position: relative
  display: inline

  .filter-info-icon
    display: inline-block
    line-height: 20px
    cursor: pointer
    +icon-sprite-two(-30px -150px,16px,20px)
    &:hover
      +icon-sprite-two(-120px -150px,16px,20px)

  .filter-info-block
    margin-top: 10px
    display: block
    position: absolute
    z-index: 2147483647 !important
    background-color: #fff
    border-radius: $border-radius
    padding: 35px  $padding_side+px  25px $padding_side+px
    width: #{($width + $padding_side * 2)}px
    left: -#{$width/2+10}px
    display: none 
    +outer-shadow

    .cross
      width: 80%
      float: right
      width: 100%
      +icon-sprite-two(-168px -87px,20px,20px)
      cursor: pointer
    img
      width: $width+px

    .triangle
      background-color: #fff
      position: absolute
      width: 25px
      height: 25px
      top: -10px
      left: #{$width/2+10}px
      border-radius: $border-radius
      border-right: none
      +rotate(45)
      -webkit-box-shadow: -3px -2px 5px -2px rgba(0, 0, 0, 0.2)
      -moz-box-shadow:    -3px -2px 5px -2px rgba(0, 0, 0, 0.2)
      box-shadow:         -3px -2px 5px -2px rgba(0, 0, 0, 0.2)



body.products, body.search-results
  .filter-info-block
    left: -245px

    .triangle
      left: 242px