//
//  Local Variables
//  _____________________________________________

$checkout-tooltip__hover__z-index: 100;


$checkout-tooltip-icon-arrow__font-size: 10px;
$checkout-tooltip-icon-arrow__left: -10;

$checkout-tooltip-icon__color: #000;
$checkout-tooltip-icon__content: '\f059';
$checkout-tooltip-icon__font-size: 24px;
$checkout-tooltip-icon__hover__color: $primary;

$checkout-tooltip-content__background-color: #f5f5f5;
$checkout-tooltip-content__border-color: #dddddd;
$checkout-tooltip-content__border-width: 1px;
$checkout-tooltip-content__font-size: 18px;
$checkout-tooltip-content__padding: 12px;
$checkout-tooltip-content__width: 270px;
$checkout-tooltip-content__active__border-color: darken($checkout-tooltip-content__border-color, 20%);

$checkout-tooltip-content-mobile-popup__width: 200px;
$checkout-tooltip-content-mobile__right: -10;
$checkout-tooltip-content-mobile__top: 30px + $checkout-tooltip-icon-arrow__font-size;

//
//  Common
//  _____________________________________________



    .field-tooltip {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 1px;

        &._active {
            z-index: $checkout-tooltip__hover__z-index;

            .field-tooltip-content {
                display: block;
            }
            .field-tooltip-action {
                &:before {
                    color: $checkout-tooltip-icon__hover__color;
                }
            }
        }

        .field-tooltip-action {
            &::before{
                font-size: $checkout-tooltip-content__font-size;
                font-family: $fa;
                content: $checkout-tooltip-icon__content;

            }

            &:focus {
                ._keyfocus & {
                    z-index: $checkout-tooltip__hover__z-index;
                    + .field-tooltip-content {
                        display: block;
                    }
                    &::before {
                        color: $checkout-tooltip-icon__hover__color;
                    }
                }
            }
        }

        .field-tooltip-content {
            background: $checkout-tooltip-content__background-color;
            border: solid 1px $checkout-tooltip-content__border-color;
            padding: $checkout-tooltip-content__padding;
            width: $checkout-tooltip-content__width;
            display: none;
            right: 0;
            position: absolute;
            text-transform: none;
            top: 100%;
            word-wrap: break-word;
            z-index: 2;
        }
    }

//
//  Mobile
//  _____________________________________________

