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

$tooltip-mini-color: transparentize($grey-super-dark, 0.05) !default;
$tooltip-mini-color-text: $white-color !default;
$tooltip-mini-color-font-size: $font-size-tool-info-xs !default;
$tooltip-mini-color-line-height: 1.33333333 !default;
$tooltip-mini-max-width: 300px !default;

.c-tooltip-mini {
    position: relative;
    padding: 10px 8px 9px 9px;
    min-width: 33px;
    margin-bottom: 12px;
}

.c-tooltip-mini--expands-to-right {
    transform: translateX(30%);
}

.c-tooltip-mini__background {
    @include fill-parent();
    background: $tooltip-mini-color;
    z-index: -1;
}

.c-tooltip-mini__text {
    color: $tooltip-mini-color-text;
    text-align: center;
    max-width: $tooltip-mini-max-width;
    font-size: $tooltip-mini-color-font-size;
    line-height: $tooltip-mini-color-line-height;
}

.c-tooltip-mini__arrow {
    position: absolute;
    transform: rotate(180deg) translateX(50%);
    height: 18px;
    left: 50%;
    top: 100%;
    overflow: hidden;
}

.c-tooltip-mini__arrow--up {
    top: 0;
    transform: translate(-50%, -100%);
}

.c-tooltip-mini__arrow--left-side {
    left: 20%;
}

.c-tooltip-mini__arrow--right-side {
    left: 80%;
}

.c-tooltip-mini__arrow__icon {
    transform: translateY(5px);
    @include setSvgColor($tooltip-mini-color);
}