// !!! Warning !!! CSS files are generated from their associated SCSS files. Don't modify the CSS files directly,
// modify the SCSS files and then compile them using compass. This will generate the CSS file for you.

$tooltipBG: #333333;

.toolTipExample {
    input {
        width: 250px;
    }
}

i.icon-info {
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    &:before {
        content: '';
        display: inline-block;
        background: url('/content/dam/apps/checkout/icon-info.svg') center center no-repeat;
        background-size: contain;
        height: 1em;
        width: 1em;
        position: relative;
        top: .1em;
    }
    &:hover,
    &.hover {
        cursor: pointer;
        span[class^="toolTip"] {
            display: block;
        }
    }
    span[class^="toolTip"] {
        display: none;
        position: absolute;
        width: 0px;
        background: $tooltipBG;
        color: white;
        font-weight: normal;
        text-align: left;
        border-radius: $radius;
        box-shadow: 0 1px 3px rgba(0,0,0,.4);
        padding: 10px 0px 8px;
        z-index: 9999;
        &:before {
            content: '';
            position: absolute;
            border: 8px solid transparent;
        }
    }
    span.ccv-tooltip[class^="toolTip"] {
        background: none;
        box-shadow: none;
    }
    span.toolTip-up {
        bottom: 26px;
        left: -92px;
        &:before {
            border-top: 8px solid $tooltipBG;
            left: 50%;
            margin-left: -8px;
            bottom: -16px;            
        }
    }
    span.toolTip-right {
        bottom: -11px;
        left: 28px;
        &:before {
            border-right: 8px solid $tooltipBG;
            bottom: 7px;
            left: -16px;            
        }
    }
    span.ccv-tooltip {
        &:before {
            border-right: none;
        }
    }
    span.toolTip-down {
        top: 30px;
        left: -92px;
        &:before {
            border-bottom: 8px solid $tooltipBG;
            left: 50%;
            margin-left: -8px;
            top: -16px;            
        }
    }
    span.toolTip-left {
        bottom: -11px;
        right: 28px;
        &:before {
            border-left: 8px solid $tooltipBG;
            bottom: 7px;
            right: -16px;            
        }
    }
  &.shippingToolTip, &.taxToolTip,  &.ccNumberToolTip{
    span[class^="toolTip"] {
      width: 200px;
      padding: 10px;
    }
  }
}