@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$c-tooltip-box-shadow: 0 4px 60px 0 transparentize($black-color, 0.8);
$c-tooltip-arrow-distance-across: 9px;
$c-tooltip-distance-to-center: 24px;

.c-tooltip {
    background: $white-color;
    border-radius: $tooltip-border-radius;
    padding: 25px 30px 27px 30px;
    box-shadow: $c-tooltip-box-shadow;
    position: absolute;
    z-index: $layer-5;
}

    $c-tooltip-position-horizontal: -$c-tooltip-arrow-distance-across;

    $c-tooltip-above-transform-y: calc(-100% + #{$c-tooltip-distance-to-center});
    .c-tooltip--right {
        $c-tooltip-right-transform-x: $c-tooltip-arrow-distance-across * 1.5;
        transform: translate(
            $c-tooltip-right-transform-x,
            -$c-tooltip-distance-to-center
        );

        .c-tooltip__arrow {
            position: absolute;
            top: 0;
            left: $c-tooltip-position-horizontal;
        }

        &.c-tooltip--above {
            transform: translate(
                $c-tooltip-right-transform-x,
                $c-tooltip-above-transform-y
            );

            .c-tooltip__arrow {
                top: 100%;
                transform: translateY(-100%);
            }
        }
    }

    .c-tooltip--left {
        $c-tooltip-left-transform-x: calc(-100% - #{$c-tooltip-arrow-distance-across * 1.5});
        transform: translate(
            $c-tooltip-left-transform-x,
            -$c-tooltip-distance-to-center
        );

        .c-tooltip__arrow {
            position: absolute;
            top: 0;
            right: $c-tooltip-position-horizontal;
            transform: rotate(180deg);
        }

        &.c-tooltip--above {
            transform: translate(
                $c-tooltip-left-transform-x,
                $c-tooltip-above-transform-y
            );

            .c-tooltip__arrow {
                top: 100%;
                transform: translateY(-100%) rotate(180deg);
            }
        }
    }

    .c-tooltip__text {
        color: $grey-dark;
    }