// Remember to import scss for styles into root scss file.-->
// {{ "@import './sass/components/components.tooltip';" }}-->

@import "../variables";

@mixin changePointerColor($position) {
    &.bs-tooltip-#{$position} {
        .arrow {
            &:before {
                border-#{$position}-color: $sgSecondary;
            }
        }
    }
}

.sg-tooltip {
    .tooltip {
        .tooltip-inner {
            background-color: $sgSecondary;
        }

        @include changePointerColor('top');
        @include changePointerColor('left');
        @include changePointerColor('right');
        @include changePointerColor('bottom');
    }

    &--primary {
        .tooltip-inner {
            background-color: $sgPrimary;
            color: $white;
            width: 240px;
            margin-left: -160px;
        }

        .arrow::before {
            border-top-color: $sgPrimary;
        }
    }

    &--warn {
        .tooltip-inner {
            background-color: orange !important;
            color: $mlp-black;
            width: 240px;
            margin-left: -160px;
        }

        .arrow::before {
            border-top-color: orange !important;
        }
    }
}