:root {
    --tooltip-color: rgba(56, 56, 56, 0.9);
    --tooltip-color-bg-selection: rgba(66, 131, 244, 0.5);
    --tooltip-color-selection: #fff;
}

.ng-tooltip::selection {
    color: initial;
}

.ng-tooltip {
    pointer-events: none;
    position: absolute;
    text-align: center;
    border-radius: 4px;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transition;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    z-index: 10000;
    background: var(--tooltip-color);
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-shadow: 0 -1px 0 #000;
    transition-delay: 0.2s !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    word-break: break-word;

    &-small {
        max-width: 150px;
    }

    &-medium {
        max-width: 300px;
    }

    & > *::selection {
        text-shadow: 1px 1px 1px rgb(0 0 0 / 0%);
        background-color: var(--tooltip-color-bg-selection);
        color: var(--tooltip-color-selection);
    }
}

.ng-tooltip-show {
    opacity: 1;
    pointer-events: inherit;
    transition-delay: 0.5s !important;

    &.ng-tooltip-top {
        transform: translateY(-10px);
    }

    &.ng-tooltip-bottom {
        transform: translateY(10px);
    }

    &.ng-tooltip-left {
        transform: translateX(-10px);
    }

    &.ng-tooltip-right {
        transform: translateX(10px);
    }
}

.ng-tooltip:after {
    content: '';
    position: absolute;
    border-style: solid;
}

.ng-tooltip-top:after,
.ng-tooltip-bottom:after,
.ng-tooltip-left:after,
.ng-tooltip-right:after {
    border-width: 5px;
}

.ng-tooltip-top:after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: var(--tooltip-color) transparent transparent transparent;
}

.ng-tooltip-bottom:after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent var(--tooltip-color) transparent;
}

.ng-tooltip-left:after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent var(--tooltip-color);
}

.ng-tooltip-right:after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent var(--tooltip-color) transparent transparent;
}
