<commit_before>$tooltip-arrow-size: 6px;
$tooltip-arrow-margin: 2px;

$tooltip-multiline-sizes: (
    small: 180px,
    medium: 240px,
    large: 300px
);

@mixin tooltip-arrow($direction, $color) {
    @if ($direction == "is-top") {
        border-top: $tooltip-arrow-size solid $color;
        border-right: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid transparent;
        bottom: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-bottom") {
        border-right: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid $color;
        border-left: $tooltip-arrow-size solid transparent;
        top: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-right") {
        border-top: $tooltip-arrow-size solid transparent;
        border-right: $tooltip-arrow-size solid $color;
        border-bottom: $tooltip-arrow-size solid transparent;
        left: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-left") {
        border-top: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid $color;
        right: calc(100% + #{$tooltip-arrow-margin});
    }
}

@mixin tooltip($direction) {
    &.#{$direction} {
        &:before,
        &:after {
            @if ($direction == "is-top") {
                top: auto;
                right: auto;
                bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-bottom") {
                top: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-right") {
                top: 50%;
                right: auto;
                bottom: auto;
                left: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                transform: translateY(-50%);
            } @else if ($direction == "is-left") {
                top: 50%;
                right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
            }
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &.is-#{$name}:before {
                @include tooltip-arrow($direction, $color)
            }
        }
        &.is-multiline {
            @each $name, $size in $tooltip-multiline-sizes {
                &.is-#{$name}:after {
                    width: $size;
                }
            }
        }
    }
}

// Base
.tooltip {
    @include tooltip("is-top");
    @include tooltip("is-right");
    @include tooltip("is-bottom");
    @include tooltip("is-left");
    position: relative;
    display: inline-flex;
    &:before,
    &:after {
        position: absolute;
        content: "";
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    &:before {
        z-index: 889;
    }
    &:after {
        content: attr(data-label);
        width: auto;
        padding: 4px 8px;
        background: $primary;
        border-radius: $radius-small;
        font-size: 12px;
        font-weight: $weight-normal;
        color: $primary-invert;
        box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2);
        z-index: 888;
        white-space: nowrap;
    }
    &:not([data-label=""]):hover:before,
    &:not([data-label=""]):hover:after {<commit_msg>Update tooltip font size<commit_after>$tooltip-arrow-size: 5px;
$tooltip-arrow-margin: 2px;

$tooltip-multiline-sizes: (
    small: 180px,
    medium: 240px,
    large: 300px
);

@mixin tooltip-arrow($direction, $color) {
    @if ($direction == "is-top") {
        border-top: $tooltip-arrow-size solid $color;
        border-right: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid transparent;
        bottom: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-bottom") {
        border-right: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid $color;
        border-left: $tooltip-arrow-size solid transparent;
        top: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-right") {
        border-top: $tooltip-arrow-size solid transparent;
        border-right: $tooltip-arrow-size solid $color;
        border-bottom: $tooltip-arrow-size solid transparent;
        left: calc(100% + #{$tooltip-arrow-margin});
    } @else if ($direction == "is-left") {
        border-top: $tooltip-arrow-size solid transparent;
        border-bottom: $tooltip-arrow-size solid transparent;
        border-left: $tooltip-arrow-size solid $color;
        right: calc(100% + #{$tooltip-arrow-margin});
    }
}

@mixin tooltip($direction) {
    &.#{$direction} {
        &:before,
        &:after {
            @if ($direction == "is-top") {
                top: auto;
                right: auto;
                bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-bottom") {
                top: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                right: auto;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
            } @else if ($direction == "is-right") {
                top: 50%;
                right: auto;
                bottom: auto;
                left: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                transform: translateY(-50%);
            } @else if ($direction == "is-left") {
                top: 50%;
                right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
                bottom: auto;
                left: auto;
                transform: translateY(-50%);
            }
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            &.is-#{$name}:before {
                @include tooltip-arrow($direction, $color)
            }
        }
        &.is-multiline {
            @each $name, $size in $tooltip-multiline-sizes {
                &.is-#{$name}:after {
                    width: $size;
                }
            }
        }
    }
}

// Base
.tooltip {
    @include tooltip("is-top");
    @include tooltip("is-right");
    @include tooltip("is-bottom");
    @include tooltip("is-left");
    position: relative;
    display: inline-flex;
    &:before,
    &:after {
        position: absolute;
        content: "";
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    &:before {
        z-index: 889;
    }
    &:after {
        content: attr(data-label);
        width: auto;
        padding: 0.35em 0.75em;
        border-radius: $radius-large;
        font-size: 0.85em;
        font-weight: $weight-normal;
        box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2);
        z-index: 888;
        white-space: nowrap;
    }
    &:not([data-label=""]):hover:before,
    &:not([data-label=""]):hover:after {
{'fraction_non_alphanumeric': 0.15831205483133987, 'fraction_numerical': 0.02002419029700309, 'mean_word_length': 1.7747949291573453, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1059889', 'n_tokens_mistral': 2390, 'n_tokens_neox': 2199, 'n_words': 477}