/*=====================================
B2C TOOLTIP
====================================*/
[b2c-tooltip-content] {
  text-align: center;
  background: $branco;
  border: 1px solid $gray-4;
  color: $gray-5;
  position: absolute;
  z-index: 100;
  padding: 15px;
  border-radius: 8px;
  font-weight: 400;
  transition: opacity .15s ease-out, visibility .15s ease-out, -webkit-transform .15s ease-out;
  -webkit-transition: opacity .15s ease-out, visibility .15s ease-out, -webkit-transform .15s ease-out;
  -o-transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s ease-out;
  transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s ease-out;
  transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s ease-out, -webkit-transform .15s ease-out;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  -webkit-transform-origin: 50% 110%;
  -ms-transform-origin: 50% 110%;
  transform-origin: 50% 110%;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);

  &:after {
    content: "";
    left: 50%;
    width: 15px;
    height: 15px;
    bottom: -9px;
    position: absolute;
    display: block;
    margin-left: -10px;
    background-color: $branco;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 1px solid $gray-4;
    border-left: none;
    border-top: none;
  }

  &[b2c-tooltip-top]:after {
    border-left: 1px solid $gray-4;
    border-top: 1px solid $gray-4;
    border-bottom: none;
    border-right: none;
    top: -9px;
  }

  &[b2c-tooltip-left]:after {
    left: 10px;
    margin: 0;
  }

  &[b2c-tooltip-right]:after {
    right: 10px;
    left: auto;
    margin: 0;
  }

}