<commit_before>@import ../../variables/elements/label.variables

//*******************************//
//            Variations
//*******************************//

@mixin label-variant($color, $backgroundColor, $borderColor)
    $detailBackgroundColor: darken($backgroundColor, 8%)

    background-color: $backgroundColor
    border-color    : $borderColor
    color           : $color      
    
    &.image .detail
        background-color: $detailBackgroundColor !important
        
    &.empty.triangle
        border-bottom-color: $backgroundColor !important
    
@mixin label-link-variant($color, $backgroundColor, $borderColor)    
    $hoverBackgroundColor : lighten($backgroundColor, 3%)
    $activeBackgroundColor: darken($backgroundColor, 8%)
    
    &:hover
        background-color: $hoverBackgroundColor !important
    &:active
        background-color: $activeBackgroundColor !important
        
//*******************************//
//              Main
//*******************************//

.ts.label 
    +label-variant($label_defaultTextColor, $label_defaultBackgroundColor, $label_defaultBorderColor)

    display       : inline-block
    line-height   : 1
    vertical-align: $label_verticalAlign
    margin        : $label_verticalMargin $label_horizontalMargin
    padding       : $label_verticalPadding $label_horizontalPadding
    font-weight   : $label_fontWeight
    border        : $label_border
    border-radius : $label_borderRadius

.ts.label:first-child 
    margin-left: 0em

.ts.label:last-child 
    margin-right: 0em

/* Link */
a.ts.label
    +label-link-variant($label_defaultTextColor, $label_defaultBackgroundColor, $label_defaultBorderColor)
    
    cursor: pointer

/* Inside Link */
.ts.label > a 
    cursor    : pointer
    color     : inherit
    opacity   : $label_linkOpacity

.ts.label > a:hover 
    opacity: 1

/* Image */
.ts.label > img 
    width         : auto !important
    vertical-align: middle
    height        : $label_imageHeight !important

/* Icon */
.ts.label > .icon 
    width: auto
    margin: 0em $label_iconDistance 0em 0em

/* Detail */
.ts.label > .detail 
    display       : inline-block
    vertical-align: top
    font-weight   : $label_detailFontWeight
    margin-left   : $label_detailMargin
    opacity       : $label_detailOpacity

.ts.label > .detail .icon 
    margin: 0em $label_detailIconDistance 0em 0em

/* Removable label */
.ts.label > .close.icon,
.ts.label > .delete.icon 
    cursor      : pointer
    margin-right: 0em
    margin-left : $label_deleteMargin
    font-size   : $label_deleteSize
    opacity     : $label_deleteOpacity
    transition  : $label_deleteTransition

.ts.label > .delete.icon:hover 
    opacity: 1

//-------------------//
//       Image 
//-------------------// 

.ts.image.label 
    width         : auto !important
    margin-top    : 0em
    margin-bottom : 0em
    max-width     : 9999px
    vertical-align: baseline
    padding       : $label_imageLabelPadding
    border-radius : $label_imageLabelBorderRadius

.ts.image.label img 
    display       : inline-block
    vertical-align: top
    height        : $label_imageLabelImageHeight
    margin        : $label_imageLabelImageMargin
    border-radius : $label_imageLabelImageBorderRadius

.ts.image.label .detail
    margin       : $label_imageLabelDetailMargin
    padding      : $label_imageLabelDetailPadding
    border-radius: 0em $label_imageLabelBorderRadius $label_imageLabelBorderRadius 0em

//-------------------//
//      Circular 
//-------------------// 

.ts.label.circular
    border-radius: $circularRadius

//-------------------//
//       Empty 
//-------------------// 

.ts.label.empty.circular
    border-radius: $circularRadius
    width        : 1em
    height       : 1em
    padding      : .5em
    
.ts.label.empty.triangle
    border-radius      : 0
    border-top         : none
    background-color   : transparent !important
    padding            : 0
    border-left        : 0.5em solid transparent
    border-right       : 0.5em solid transparent
    border-left-color  : transparent !important
    border-right-color : transparent !important
    border-top-color   : transparent !important
    border-bottom-width: 1em
    border-bottom-style: solid

.ts.label.empty.square
    border-radius: 0
    padding      : .5em

//-------------------//
//       Basic 
//-------------------// 

.ts.basic.label 
    background: $label_basicBackground
    border    : $label_basicBorder<commit_msg>Hide the text when .ts.empty.label<commit_after>@import ../../variables/elements/label.variables

//*******************************//
//            Variations
//*******************************//

@mixin label-variant($color, $backgroundColor, $borderColor)
    $detailBackgroundColor: darken($backgroundColor, 8%)

    background-color: $backgroundColor
    border-color    : $borderColor
    color           : $color      
    
    &.image .detail
        background-color: $detailBackgroundColor !important
        
    &.empty.triangle
        border-bottom-color: $backgroundColor !important
    
@mixin label-link-variant($color, $backgroundColor, $borderColor)    
    $hoverBackgroundColor : lighten($backgroundColor, 3%)
    $activeBackgroundColor: darken($backgroundColor, 8%)
    
    &:hover
        background-color: $hoverBackgroundColor !important
    &:active
        background-color: $activeBackgroundColor !important
        
//*******************************//
//              Main
//*******************************//

.ts.label 
    +label-variant($label_defaultTextColor, $label_defaultBackgroundColor, $label_defaultBorderColor)

    display       : inline-block
    line-height   : 1
    vertical-align: $label_verticalAlign
    margin        : $label_verticalMargin $label_horizontalMargin
    padding       : $label_verticalPadding $label_horizontalPadding
    font-weight   : $label_fontWeight
    border        : $label_border
    border-radius : $label_borderRadius

.ts.label:first-child 
    margin-left: 0em

.ts.label:last-child 
    margin-right: 0em

/* Link */
a.ts.label
    +label-link-variant($label_defaultTextColor, $label_defaultBackgroundColor, $label_defaultBorderColor)
    
    cursor: pointer

/* Inside Link */
.ts.label > a 
    cursor    : pointer
    color     : inherit
    opacity   : $label_linkOpacity

.ts.label > a:hover 
    opacity: 1

/* Image */
.ts.label > img 
    width         : auto !important
    vertical-align: middle
    height        : $label_imageHeight !important

/* Icon */
.ts.label > .icon 
    width: auto
    margin: 0em $label_iconDistance 0em 0em

/* Detail */
.ts.label > .detail 
    display       : inline-block
    vertical-align: top
    font-weight   : $label_detailFontWeight
    margin-left   : $label_detailMargin
    opacity       : $label_detailOpacity

.ts.label > .detail .icon 
    margin: 0em $label_detailIconDistance 0em 0em

/* Removable label */
.ts.label > .close.icon,
.ts.label > .delete.icon 
    cursor      : pointer
    margin-right: 0em
    margin-left : $label_deleteMargin
    font-size   : $label_deleteSize
    opacity     : $label_deleteOpacity
    transition  : $label_deleteTransition

.ts.label > .delete.icon:hover 
    opacity: 1

//-------------------//
//       Image 
//-------------------// 

.ts.image.label 
    width         : auto !important
    margin-top    : 0em
    margin-bottom : 0em
    max-width     : 9999px
    vertical-align: baseline
    padding       : $label_imageLabelPadding
    border-radius : $label_imageLabelBorderRadius

.ts.image.label img 
    display       : inline-block
    vertical-align: top
    height        : $label_imageLabelImageHeight
    margin        : $label_imageLabelImageMargin
    border-radius : $label_imageLabelImageBorderRadius

.ts.image.label .detail
    margin       : $label_imageLabelDetailMargin
    padding      : $label_imageLabelDetailPadding
    border-radius: 0em $label_imageLabelBorderRadius $label_imageLabelBorderRadius 0em

//-------------------//
//      Circular 
//-------------------// 

.ts.label.circular
    border-radius: $circularRadius

//-------------------//
//       Empty 
//-------------------// 

.ts.label.empty
    text-indent: -9999px

.ts.label.empty.circular
    border-radius: $circularRadius
    width        : 1em
    height       : 1em
    padding      : .5em
    
.ts.label.empty.triangle
    border-radius      : 0
    border-top         : none
    background-color   : transparent !important
    padding            : 0
    border-left        : 0.5em solid transparent
    border-right       : 0.5em solid transparent
    border-left-color  : transparent !important
    border-right-color : transparent !important
    border-top-color   : transparent !important
    border-bottom-width: 1em
    border-bottom-style: solid

.ts.label.empty.square
    border-radius: 0
    padding      : .5em

//-------------------//
//       Basic 
//-------------------// 

.ts.basic.label 
    background: $label_basicBackground
    border    : $label_basicBorder
{'fraction_non_alphanumeric': 0.15553593111822497, 'fraction_numerical': 0.008168672038856385, 'mean_word_length': 2.16894018887723, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 21, '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': '1344852', 'n_tokens_mistral': 2656, 'n_tokens_neox': 2558, 'n_words': 512}