<commit_before>@require "popover-settings.styl";
$popover-diagonal = $popover-spacing * math(2, 'sqrt');
$quarter-pi = 3.141592653589793 / 4;
$popover-box-shadow-x-prime = $popover-box-shadow-x * cos($quarter-pi) + $popover-box-shadow-y * sin($quarter-pi);
$popover-box-shadow-y-prime = -1 * $popover-box-shadow-x * sin($quarter-pi) + $popover-box-shadow-y * cos($quarter-pi);
$popover-gradient-percentage = 60%;

// TODO: Prevent mouse-down on trigger when popover is open
.popover-trigger {
    position: relative;
}

.popover {
    display: block;
    position: absolute;
    min-width: 30vw;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s, opacity 0.3s;
    -webkit-backface-visibility: hidden;
    -webkit-filter: unquote("blur(0)");
    cursor: default;
    &.popover-top {
        bottom: 100%;
        padding-bottom: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-right {
        left: 100%;
        padding-left: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    &.popover-bottom {
        top: 100%;
        padding-top: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-left {
        right: 100%;
        padding-right: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    .popover-top.popover-align-left&,
    .popover-bottom.popover-align-left& {
        left: 0;
        transform: none;
    }
    .popover-top.popover-align-right&,
    .popover-bottom.popover-align-right& {
        right: 0;
        left: auto;
        transform: none;
    }
    .popover-right.popover-align-top&,
    .popover-left.popover-align-top& {
        top: 0;
        transform: none;
    }
    .popover-right.popover-align-bottom&,
    .popover-left.popover-align-bottom& {
        top: auto;
        bottom: 0;
        transform: none;
    }
    &:before {
        content: '';
        display: block;
        position: absolute;
        height: $popover-diagonal;
        width: $popover-diagonal;
        border: $popover-border-width solid $popover-border-color;
        background-color: $popover-border-color;
        z-index: -1;
        box-shadow: $popover-box-shadow-x-prime $popover-box-shadow-y-prime $popover-box-shadow-additional;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            transform: translateY($popover-diagonal / 2) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            left: 50%;
        }
        .popover-left& {
            transform: translateX($popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding;
        }
        .popover-right.popover-align-top&,
        .popover-left.popover-align-top& {
            top: $popover-padding + $popover-spacing + $popover-border-width;
        }
        .popover-right.popover-align-bottom&,
        .popover-left.popover-align-bottom& {
            top: auto;
            bottom: $popover-padding - $popover-border-width;
        }
    }
    &:after {
        content: '';
        display: block;
        position: absolute;
        background: $popover-background-color;
        height: $popover-diagonal;
        width: $popover-diagonal;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            background-image: linear-gradient(-45deg, $popover-background-color $popover-gradient-percentage, transparent $popover-gradient-percentage);
            transform: translateY($popover-diagonal / 2 - $popover-border-width) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            background-image: linear-gradient(45deg, $popover-background-color $popover-gradient-percentage, transparent $popover-gradient-percentage);
            transform: translateX($popover-border-width - $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            background-image: linear-gradient(135deg, $popover-background-color $popover-gradient-percentage, transparent $popover-gradient-percentage);
            transform: translateY($popover-border-width - $popover-diagonal / 2) translateX(-50%) rotate(45deg);
            left: 50%;
            top: $popover-spacing;
        }
        .popover-left& {
            background-image: linear-gradient(-135deg, $popover-background-color $popover-gradient-percentage, transparent $popover-gradient-percentage);
            transform: translateX($popover-diagonal / 2 - $popover-border-width) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding;
        }
        .popover-right.popover-align-top&,<commit_msg>Fixed popover arrow in Firefox.<commit_after>@require "popover-settings.styl";
$popover-diagonal = $popover-spacing * math(2, 'sqrt');
$quarter-pi = 3.141592653589793 / 4;
$popover-box-shadow-x-prime = $popover-box-shadow-x * cos($quarter-pi) + $popover-box-shadow-y * sin($quarter-pi);
$popover-box-shadow-y-prime = -1 * $popover-box-shadow-x * sin($quarter-pi) + $popover-box-shadow-y * cos($quarter-pi);
$popover-gradient-percentage = 60%;

// Added a 1px offset to cover in Firefox
$popover-arrow-cover-offset = 1;
$popover-arrow-cover = ($popover-diagonal / 2) + $popover-arrow-cover-offset;
$popover-arrow-cover-position = ($popover-diagonal / 2) - $popover-arrow-cover-offset;

// TODO: Prevent mouse-down on trigger when popover is open
.popover-trigger {
    position: relative;
}

.popover {
    display: block;
    position: absolute;
    min-width: 30vw;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s, opacity 0.3s;
    -webkit-backface-visibility: hidden;
    -webkit-filter: unquote("blur(0)");
    cursor: default;
    &.popover-top {
        bottom: 100%;
        padding-bottom: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-right {
        left: 100%;
        padding-left: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    &.popover-bottom {
        top: 100%;
        padding-top: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-left {
        right: 100%;
        padding-right: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    .popover-top.popover-align-left&,
    .popover-bottom.popover-align-left& {
        left: 0;
        transform: none;
    }
    .popover-top.popover-align-right&,
    .popover-bottom.popover-align-right& {
        right: 0;
        left: auto;
        transform: none;
    }
    .popover-right.popover-align-top&,
    .popover-left.popover-align-top& {
        top: 0;
        transform: none;
    }
    .popover-right.popover-align-bottom&,
    .popover-left.popover-align-bottom& {
        top: auto;
        bottom: 0;
        transform: none;
    }
    &:before {
        content: '';
        display: block;
        position: absolute;
        height: $popover-diagonal;
        width: $popover-diagonal;
        border: $popover-border-width solid $popover-border-color;
        background-color: $popover-border-color;
        z-index: -1;
        box-shadow: $popover-box-shadow-x-prime $popover-box-shadow-y-prime $popover-box-shadow-additional;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            transform: translateY($popover-diagonal / 2) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            left: 50%;
        }
        .popover-left& {
            transform: translateX($popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding;
        }
        .popover-right.popover-align-top&,
        .popover-left.popover-align-top& {
            top: $popover-padding + $popover-spacing + $popover-border-width;
        }
        .popover-right.popover-align-bottom&,
        .popover-left.popover-align-bottom& {
            top: auto;
            bottom: $popover-padding - $popover-border-width;
        }
    }
    &:after {
        content: '';
        display: block;
        position: absolute;
        border: $popover-arrow-cover solid $popover-background-color;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            border-top-color: transparent;
            border-left-color: transparent;
            transform: translateY($popover-arrow-cover-position - $popover-border-width) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            border-top-color: transparent;
            border-right-color: transparent;
            transform: translateX($popover-border-width - $popover-arrow-cover-position) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: translateY($popover-border-width - $popover-arrow-cover-position) translateX(-50%) rotate(45deg);
            left: 50%;
            top: $popover-spacing;
        }
        .popover-left& {
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: translateX($popover-arrow-cover-position - $popover-border-width) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding;
        }
        .popover-right.popover-align-top&,
{'fraction_non_alphanumeric': 0.14285714285714285, 'fraction_numerical': 0.022174840085287847, 'mean_word_length': 2.0346790890269153, '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': '6587318', 'n_tokens_mistral': 3982, 'n_tokens_neox': 3678, 'n_words': 621}