@import '../dynamic.scss';

$tooltip-padding-x: 1rem;
$tooltip-padding-y: 0.5rem;
$tooltip-arrow-size: 1rem;
$line-height-base-md: 2rem;

// Basic inline tooltip
.tooltip {
    background-color: $dark;
    color: $white;
    font-size: $font-size-sm;
    text-align: left;
    line-height: $line-height-base-md;
    padding: $tooltip-padding-y $tooltip-padding-x;
    border-radius: $border-radius;
    position: relative;
    display: block;

    // Arrow
    &::before {
        content: ' ';
        color: $dark;
        border: {
            left: solid transparent $tooltip-arrow-size;
            right: solid transparent $tooltip-arrow-size;
            top: none;
            bottom: solid currentColor $tooltip-arrow-size;
        }
        width: 0;
        height: 0;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        pointer-events: none;
    }

    // Colors
    &.tooltip-info {
        $info-bg: mix($info, $white, 20%);
        color: black;
        background-color: $info-bg;
        &::before {
            color: $info-bg;
        }
    }

    // Content
    .tooltip_html {
        display: flex;
        .tooltip_icon {
            margin-right: $tooltip-padding-x;
            margin-top: $tooltip-padding-y / 2;
            flex: 0 0 2rem;
            order: 0;
        }
        .tooltip_content {
            flex: 1 1 auto;
            order: 1;
        }
        .tooltip_close-icon {
            cursor: pointer;
            margin-left: $tooltip-padding-x;
            margin-top: $tooltip-padding-y / 2;
            flex: 0 0 2rem;
            order: 2;
        }
    }

    // Positions
    &.tooltip-southwest {
        &::before {
            left: auto;
            right: calc(0% + #{$border-radius});
            transform: none;
        }
    }
    &.tooltip-southeast {
        &::before {
            right: auto;
            left: calc(0% + #{$border-radius});
            transform: none;
        }
    }
    &.tooltip-north {
        &::before {
            border: {
                top: solid currentColor $tooltip-arrow-size;
                bottom: none;
            }
            top: 100%;
            bottom: auto;
        }
    }
    &.tooltip-east {
        &::before {
            border: {
                left: none;
                right: solid currentColor $tooltip-arrow-size;
                top: solid transparent $tooltip-arrow-size;
                bottom: solid transparent $tooltip-arrow-size;
            }
            top: 50%;
            bottom: auto;
            left: auto;
            right: 100%;
            transform: translateX(0) translateY(-50%);
        }
    }
    &.tooltip-west {
        &::before {
            border: {
                left: solid currentColor $tooltip-arrow-size;
                right: none;
                top: solid transparent $tooltip-arrow-size;
                bottom: solid transparent $tooltip-arrow-size;
            }
            top: 50%;
            bottom: auto;
            left: 100%;
            right: auto;
            transform: translateX(0) translateY(-50%);
        }
    }
}

// Positioned tooltips
.tooltip_container {
    position: relative;

    & > .tooltip {
        min-width: 20rem;
        max-width: 40rem;
        position: absolute;
        top: calc(100% + #{$tooltip-arrow-size});
        left: 50%;
        transform: translateX(-50%);
        z-index: $z-tooltip;
        pointer-events: none;
        display: none;

        // Sizes
        &.tooltip-sm {
            white-space: nowrap;
            min-width: 0;
            max-width: 20rem;
        }
        &.tooltip-lg {
            white-space: normal;
            min-width: 30rem;
            max-width: 60rem;
        }

        // Positions
        &.tooltip-southwest {
            left: auto;
            right: 50%;
            transform: translateX($tooltip-arrow-size + $border-radius);
            &::before {
                left: auto;
                right: calc(0% + #{$border-radius});
                transform: none;
            }
        }
        &.tooltip-southeast {
            left: 50%;
            right: auto;
            transform: translateX(($tooltip-arrow-size + $border-radius) * -1);
            &::before {
                right: auto;
                left: calc(0% + #{$border-radius});
                transform: none;
            }
        }
        &.tooltip-north {
            top: auto;
            bottom: calc(100% + #{$tooltip-arrow-size});
            &::before {
                border: {
                    top: solid currentColor $tooltip-arrow-size;
                    bottom: none;
                }
                top: 100%;
                bottom: auto;
            }
        }
        &.tooltip-east {
            top: 50%;
            bottom: auto;
            right: auto;
            left: calc(100% + #{$tooltip-arrow-size});
            transform: translateX(0) translateY(-50%);
            &::before {
                border: {
                    left: none;
                    right: solid currentColor $tooltip-arrow-size;
                    top: solid transparent $tooltip-arrow-size;
                    bottom: solid transparent $tooltip-arrow-size;
                }
                top: 50%;
                bottom: auto;
                left: auto;
                right: 100%;
                transform: translateX(0) translateY(-50%);
            }
        }
        &.tooltip-west {
            top: 50%;
            bottom: auto;
            left: auto;
            right: calc(100% + #{$tooltip-arrow-size});
            transform: translateX(0) translateY(-50%);
            &::before {
                border: {
                    left: solid currentColor $tooltip-arrow-size;
                    right: none;
                    top: solid transparent $tooltip-arrow-size;
                    bottom: solid transparent $tooltip-arrow-size;
                }
                top: 50%;
                bottom: auto;
                left: 100%;
                right: auto;
                transform: translateX(0) translateY(-50%);
            }
        }
    }

    // Modes

    &:hover {
        & > .tooltip {
            display: block;
        }
    }
    &.tooltip-no-hover {
        &:hover > .tooltip {
            display: none;
        }
    }

    &.tooltip-focus {
        & > .tooltip {
            pointer-events: all;
        }
        & .tooltip-focus-target:focus,
        & .tooltip-focus-target:active {
            & ~ .tooltip {
                display: block;
            }
        }
        &:focus-within {
            & > .tooltip {
                display: block;
            }
        }
    }

    &.tooltip-toggle {
        & > .tooltip {
            display: none;
            pointer-events: all;
        }
        &.tooltip-toggle-show {
            & > .tooltip {
                display: block;
            }
            &:hover > .tooltip {
                display: block;
            }
        }
        &:hover > .tooltip {
            display: none;
        }
    }
}