<commit_before>// =============================================
// Circle
// =============================================

@mixin circle($color: #000, $size: 5px) {
    height: $size;
    width: $size;
    border-radius: 100%;
    background-color: $color;
    display: inline-block;
}


// =============================================
// Square
// =============================================

@mixin square($color: #000, $size: 5px) {
    height: $size;
    width: $size;
    background-color: $color;
    display: inline-block;
}


// =============================================
// Triangle
// =============================================

@mixin triangle($color: #000, $size: 5px, $size-2: $size, $direction: up) {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;

    @if $direction == up {
        border-right: $size solid transparent;
        border-left: $size solid transparent;
        border-bottom: $size-2 solid $color;
        border-top: none;
    }

    @if $direction == down {
        border-right: $size solid transparent;
        border-left: $size solid transparent;
        border-top: $size-2 solid $color;
        border-bottom: none;
        border-bottom: none;
    }

    @if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size-2 solid $color;
        border-right: none;
    }

    @if $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size-2 solid $color;
        border-left: none;
    }
}


// =============================================
// Chevron
// =============================================

@mixin chevron($color:  #000, $size: 5px, $direction: left, $thickness: 1px) {
    content: '';
    display: inline-block;
    width: $size;
    height: $size;
    background: transparent;
    border-top: $thickness solid $color;
    border-right: $thickness solid $color;
    
    @if $direction == up {
        transform: rotate(-45deg);
    }

    @if $direction == down {
        transform: rotate(135deg);
    }

    @if $direction == left {
        transform: rotate(-135deg);
    }

    @if $direction == right {
        transform: rotate(45deg);
    }
}


// =============================================
// Minus
// =============================================

@mixin minus($color: #000, $size: 22px, $thickness: 2px) {
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
}


// =============================================
// Plus
// =============================================

@mixin plus($color: #000, $size: 22px, $thickness: 2px) {
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
    }
    &:before {
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
    &:after {
        width: $thickness;
        height: $size;
        left: 50%;
        top: 0;
        margin-left: -($thickness/2);
    }
}


// =============================================
// Cross
// =============================================

@mixin cross($color: #000, $size: 22px, $thickness: 2px) {
    transform: rotate(45deg);
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
    }
    &:before {
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
    &:after {
        width: $thickness;
        height: $size;
        left: 50%;
        top: 0;
        margin-left: -($thickness/2);
    }
}


// =============================================
// Tick
// =============================================

@mixin tick($color: #000, $size: 20px, $thickness: 2px) {
    
    position: relative;
    display: inline-block;
    width: $size;
    height: $size;
    transform: rotate(45deg);
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    &:before {
        width: $thickness;
        height: $size;
    }
    
    &:after {
        width: $size/2;
        height: $thickness;
    }
}


// =============================================
// Hamburger
// =============================================

@mixin hamburger($color: #000, $size: 20px, $size2: $size, $thickness: 2px) {
    position: relative;
    display: inline-block;
    border-top: $thickness solid $color;
    border-bottom: $thickness solid $color;
    width: $size2;
    height: $size;

    &:before {
        content: "";
        position: absolute;
        display: inline-block;
        width: 100%;
        height: $thickness;
        background-color: $color;
        top: 50%;
        margin-top: -$thickness/2;
    }
    
}


// =============================================
// Ring
// =============================================

@mixin ring($foreground-color: rgba(0,0,0,0.3), $background-color: rgba(0,0,0,0.3), $size: 20px, $thickness: 4px) {
    display: inline-block;
    background: transparent;
    border-bottom: $thickness solid $background-color;
    border-left: $thickness solid $background-color;
    border-right: $thickness solid $foreground-color;
    border-top: $thickness solid $background-color;
    border-radius: 100%;
    height: $size;
    width: $size;
}
<commit_msg>Hide vertical part of shape.<commit_after>// =============================================
// Circle
// =============================================

@mixin circle($color: #000, $size: 5px) {
    height: $size;
    width: $size;
    border-radius: 100%;
    background-color: $color;
    display: inline-block;
}


// =============================================
// Square
// =============================================

@mixin square($color: #000, $size: 5px) {
    height: $size;
    width: $size;
    background-color: $color;
    display: inline-block;
}


// =============================================
// Triangle
// =============================================

@mixin triangle($color: #000, $size: 5px, $size-2: $size, $direction: up) {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;

    @if $direction == up {
        border-right: $size solid transparent;
        border-left: $size solid transparent;
        border-bottom: $size-2 solid $color;
        border-top: none;
    }

    @if $direction == down {
        border-right: $size solid transparent;
        border-left: $size solid transparent;
        border-top: $size-2 solid $color;
        border-bottom: none;
        border-bottom: none;
    }

    @if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size-2 solid $color;
        border-right: none;
    }

    @if $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size-2 solid $color;
        border-left: none;
    }
}


// =============================================
// Chevron
// =============================================

@mixin chevron($color:  #000, $size: 5px, $direction: left, $thickness: 1px) {
    content: '';
    display: inline-block;
    width: $size;
    height: $size;
    background: transparent;
    border-top: $thickness solid $color;
    border-right: $thickness solid $color;
    
    @if $direction == up {
        transform: rotate(-45deg);
    }

    @if $direction == down {
        transform: rotate(135deg);
    }

    @if $direction == left {
        transform: rotate(-135deg);
    }

    @if $direction == right {
        transform: rotate(45deg);
    }
}


// =============================================
// Minus
// =============================================

@mixin minus($color: #000, $size: 22px, $thickness: 2px) {
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
    
    // We need this as we may use plus on the same element
    // so we dont want to show the vertical part of the shape
    &:after {
        display: none;
    }
}


// =============================================
// Plus
// =============================================

@mixin plus($color: #000, $size: 22px, $thickness: 2px) {
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
    }
    &:before {
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
    &:after {
        width: $thickness;
        height: $size;
        left: 50%;
        top: 0;
        margin-left: -($thickness/2);
    }
}


// =============================================
// Cross
// =============================================

@mixin cross($color: #000, $size: 22px, $thickness: 2px) {
    transform: rotate(45deg);
    display: inline-block;
    position: relative;
    width: $size;
    height: $size;
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
    }
    &:before {
        width: $size;
        height: $thickness;
        left: 0;
        top: 50%;
        margin-top: -($thickness/2);
    }
    &:after {
        width: $thickness;
        height: $size;
        left: 50%;
        top: 0;
        margin-left: -($thickness/2);
    }
}


// =============================================
// Tick
// =============================================

@mixin tick($color: #000, $size: 20px, $thickness: 2px) {
    
    position: relative;
    display: inline-block;
    width: $size;
    height: $size;
    transform: rotate(45deg);
    
    &:before,
    &:after {
        content: '';
        display: inline-block;
        background-color: $color;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    &:before {
        width: $thickness;
        height: $size;
    }
    
    &:after {
        width: $size/2;
        height: $thickness;
    }
}


// =============================================
// Hamburger
// =============================================

@mixin hamburger($color: #000, $size: 20px, $size2: $size, $thickness: 2px) {
    position: relative;
    display: inline-block;
    border-top: $thickness solid $color;
    border-bottom: $thickness solid $color;
    width: $size2;
    height: $size;

    &:before {
        content: "";
        position: absolute;
        display: inline-block;
        width: 100%;
        height: $thickness;
        background-color: $color;
        top: 50%;
        margin-top: -$thickness/2;
    }
    
}


// =============================================
// Ring
// =============================================

@mixin ring($foreground-color: rgba(0,0,0,0.3), $background-color: rgba(0,0,0,0.3), $size: 20px, $thickness: 4px) {
    display: inline-block;
    background: transparent;
    border-bottom: $thickness solid $background-color;
    border-left: $thickness solid $background-color;
    border-right: $thickness solid $foreground-color;
    border-top: $thickness solid $background-color;
    border-radius: 100%;
    height: $size;
    width: $size;
}

{'fraction_non_alphanumeric': 0.2746101364522417, 'fraction_numerical': 0.01916829109811566, 'mean_word_length': 2.4587078651685395, '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': '3278560', 'n_tokens_mistral': 3918, 'n_tokens_neox': 3599, 'n_words': 859}