@import 'css/master/settings/settings';

.savings_detail_hover {
  z-index: 100;
  position: absolute;
  opacity: 0;
  left: 0;
  background-color: $white;
  padding: 12px;
  bottom: 100%;
  margin-bottom: 8px;
  border: solid 1px #e4e4e4;
  box-shadow: 0 0 10px #e4e4e4;
  width: 167px;
  pointer-events: none;
  display: block;
  @include border-radius(6px);
  @include transform(translateY(10px));
  @include transition(all .25s ease-out);
  &:after, &:before {
    top: 100%;
    left: 25%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
  }
  &:before {
    border: 12px solid rgba(215, 215, 215, 0);
    border-top-color: rgba(215, 215, 215, 1);
    margin-left: -12px;
  }
  &:after {
    border: 10px solid rgba(215, 215, 215, 0);
    border-top-color: #fff;
    margin-left: -10px;
  }
  .tooltip_fix {
    &:after {
      content: " ";
      position: absolute;
      width: 100%;
      height: 11px;
      bottom: -12px;
      left: 0;
    }
  }
  table {
    margin: 0;
    width: 100%;
    table-layout: fixed;
    @include font-size($baseFontSize - 3);
    tr {
      td {
        color: #4a4a4a !important;
        padding: 2px 0;
        text-align:right;
        font-weight: $fontWeightSemiBold;
        &.amount_column {
          text-align: right;
        }
        &.price_red {
          color: #ce0000 !important;
        }
        &.semi_bold {
          font-weight: $fontWeightBold;
        }
      }
      &.savings {
        td {
          vertical-align: top;
        }
      }
      &.instant_savings td {
        white-space: normal;
      }
      &.your_price td {
        font-size: 14px;
        font-weight: 600;
        border-width: 1px 0;
        border-color: #e4e4e4;
        border-style: solid;
        padding: 10px 0 !important;
      }
    }
  }
  &.position_secondary {
    right: 115px;
    top: 161px;
    padding: 13px;
  }
  .tFootTd {
    white-space: normal;
    @include font-size($baseFontSize - 4);
  }
}

.rr_zone_savings_details {
  position: relative;
  float: left;
  margin-top: 2px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
  font-size: 11px;
  line-height: 11px;
  a {
    color: $blue !important;
  }
  .price_column {
    cursor: pointer;
    padding-top: 3px;
  }
  &:hover {
    .savings_detail_hover {
      opacity: 1;
      pointer-events: auto;
      cursor: default;
      font-size: 13px;
      line-height: 13px;
      @include transform(translateY(0px));
      &:before, &:after {
        pointer-events: auto;
      }
    }
  }
}