@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: 14px;
$c-tooltip-distance-to-center: 24px;

$tooltip-color: $white-color !default;
$tooltip-color-text: $grey-super-dark !default;
$tooltip-color-inverse: transparentize($grey-super-dark, 0.05) !default;
$tooltip-color-text-inverse: $white-color !default;

.c-tooltip {
    background: $tooltip-color;
    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-transform-x: calc(-100% - #{$c-tooltip-arrow-distance-across * 1.5});
.c-tooltip--left {
    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--inverse {
    background-color: $tooltip-color-inverse;   
    .c-tooltip__arrow__icon {         
        @include setSvgColor($tooltip-color-inverse);
    }
    
    .c-tooltip__title {
        color: $tooltip-color-text-inverse;
    }
    .c-tooltip__text {
        color: $tooltip-color-text-inverse;
    }
}
 
.c-tooltip__arrow__icon {
    transform: rotate(-90deg);
    @include setSvgColor($tooltip-color);
    clip-path: inset(0 0 10px 0);
}

.c-tooltip__title {
    color: $tooltip-color-text;
}

.c-tooltip__text {
    color: $tooltip-color-text;
}