@import '../dynamic.scss';

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

.tooltip_container {
    position: relative;

    & > .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;
        min-width: 20rem;
        max-width: 100vw;
        position: absolute;
        top: calc(100% + #{$tooltip-arrow-size});
        left: 50%;
        transform: translateX(-50%);
        z-index: $z-tooltip;
        flex-direction: row;
        pointer-events: none;
        display: none;

        // Arrow

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

        // Content

        .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;
        }

        // Sizes

        &.tooltip-sm {
            white-space: nowrap;
            min-width: 0;
        }
        &.tooltip-lg {
            white-space: normal;
            min-width: 30rem;
        }

        // 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 $dark $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 $dark $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 $dark $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: flex;
        }
    }
    &.tooltip-focus {
        & > .tooltip {
            pointer-events: all;
        }
        & > .tooltip-focus-target:focus {
            & + .tooltip {
                display: flex;
            }
            &:hover + .tooltip {
                display: flex;
            }
        }
        &:focus-within {
            & > .tooltip {
                display: flex;
            }
            &:hover > .tooltip {
                display: flex;
            }
        }
        &:hover > .tooltip {
            display: none;
        }
    }
    &.tooltip-toggle {
        & > .tooltip {
            pointer-events: all;
        }
        &.tooltip-toggle-show {
            & > .tooltip {
                display: flex;
            }
            &:hover > .tooltip {
                display: flex;
            }
        }
        &:hover > .tooltip {
            display: none;
        }
    }
}