@use "../../colors/gray/c-gray-dark";

@mixin tooltip($position: 'top') {
    z-index: 1000;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        left: 82%;
        border-width: 0.2em 0.2em 0 0.2em;
        border-style: solid;
        border-color: white transparent transparent transparent;
        z-index: 100;

        @if($position == 'top') {
          transform: translateX(-200%) translateY(90%);
        } @else if($position == 'top-center') {
          left: 45% !important;
          transform: translateX(0%) translateY(90%);
        } @else if($position == 'bottom') {
            left: 107%;
            transform: translateX(-137%) translateY(100%) rotate(180deg);
        }
        @else if($position == 'bottom-right') { transform: translateX(-137%) translateY(100%) rotate(180deg); }
        @else if($position == 'bottom-gantt') { transform: translateX(-137%) translateY(100%) rotate(180deg); }
        @else if($position == 'bottom-menu') { transform: translateX(-137%) translateY(100%) rotate(180deg); }
        @else if($position == 'top-status-table') {
            border-width: 0.6em 0.6em 0 0.6em;
            transform: translateX(-237%) translateY(-15%);
        }
    }

    &::after {
        content: attr(tooltip);
        position: absolute;
        background: white;
        text-align: center;
        color: c-gray-dark.$d;
        font-weight: 300;
        padding: 0.5em 1em;
        width: max-content;
        max-width: 50em;
        border: none;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1.5em;
        font-size: 0.4em;
        height: 1.5em;
        user-select: none;

        @if($position == 'top') {
            left: 0;
        } @else if($position == 'top-center') {
          $padding: -0.5em;
          transform: translateX($padding);
        } @else if($position == 'top-status-table') {
            left: 0;
            font-size: 0.9em;
        }

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            @if($position == 'bottom-gantt') {
                font-size: 11.5px;
            } @else if($position == 'bottom-gantt') {
                font-size: 11.5px;
            } @else if($position == 'top-status-table') {
                left: 0.9em;
                font-size: 2em;
            }
        }
    }

    &:not(hover), &:hover {
        &::before {
            @if($position == 'top') {
                //top: -0.1em;
                top: -0.5em;
                left: 93%;
            } @else if($position == 'bottom') {
                //bottom: 0.4em;
                bottom: 0.1em;
            } @else if($position == 'bottom-right') {
                left: 94%;
            } @else if($position == 'bottom-gantt') {
                left: 83%;
                bottom: -0.1em;
            } @else if($position == 'bottom-menu') {
                left: 74%;
                bottom: -0.1em;
            }
        }

        &::after {
            @if($position == 'top') {
                left: 0;
                top: -3.1em;
            } @else if($position == 'bottom') {
                left: 0;
                bottom: -2.7em;
            } @else if($position == 'bottom-right') {
                left: -200%;
                bottom: -2.7em;
            } @else if($position == 'bottom-gantt') {
                left: 0;
                bottom: -3.1em;
            } @else if($position == 'bottom-menu') {
                left: -64%;
                bottom: -3.1em;
            }
        }
    }

    &:not(hover) {
        &::before, &::after {
            opacity: 0;
            transition: all 0.1s ease-in-out;
        }
    }

    &:hover {
        &::before, &::after {
            opacity: 1;
            transition: all 0.1s ease-in-out;
        }
    }
}

.tooltip-menu {
    z-index: 100;
    position: relative;
    display: flex;

    &::before {
        content: "";
        position: absolute;
        left: 80%;
        transform: translateX(-137%) translateY(100%) rotate(180deg);
        border-width: 0.2em 0.2em 0 0.2em;
        border-style: solid;
        border-color: white transparent transparent transparent;
        z-index: 100;
    }

    &::after {
        content: attr(tooltip);
        position: absolute;
        left: 80%;
        transform: translateX(-57%) translateY(124%);
        background: white;
        text-align: left;
        color: c-gray-dark.$d;
        font-weight: 600;
        padding: 0.5em 1em;
        width: max-content;
        max-width: 50em;
        border: none;
        pointer-events: none;
        white-space: nowrap;
        line-height: 1.5em;
        font-size: 0.4em;
    }

    &:not(hover) {
        &::before {
            opacity: 0;
            bottom: -0.3em;
            transition: all 0.1s ease-in-out;
        }

        &::after {
            opacity: 0;
            bottom: 0;
            transition: all 0.1s ease-in-out;
        }
    }

    &:hover {
        &::after, &::before {
            opacity: 1;
            bottom: -0.11em;
            transition: all 0.1s ease-in-out;
        }
    }
}

.tooltip.top {
    @include tooltip('top');
}
.tooltip.top.center {
  @include tooltip('top-center');
}

.tooltip.top.status-table {
    @include tooltip('top-status-table');
}

.tooltip.bottom {
    @include tooltip('bottom');
}
.tooltip.bottom-right {
    @include tooltip('bottom-right');
}
.tooltip.bottom-gantt {
    @include tooltip('bottom-gantt');
}

.tooltip.bottom-menu {
    @include tooltip('bottom-menu');
}