<commit_before>@import '../common.scss';

.button {
    @include FontRoman();
    font-size: 14px;

    box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
    transition: 
      color 0.3s ease,
      border-color 0.3s ease,
      background-color 0.3s ease;
    height: 36px;
    padding: 0px 24px;
    text-align: center;
    border: 1px solid;
    cursor: pointer;
    outline: none;
}

.button>.inner {
    display: flex;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}

.button>div, .button>.inner>div {
    color: inherit;
}

.button.disabled
{
    pointer-events:none;
    background-color: $GR10 !important;
    border-color: $GR10 !important;
    color: #fff !important;
}

.fullblue
{
    background-color: $B10;
    border-color: $B10;
    color: #fff;
}

.fullblue:hover, .fullblue.hover
{
    background-color: $paletteB2;
    border-color: $paletteB2;
}

.fullblue:active, .fullblue.active
{
    background-color: $B00;
    border-color: $B00;
    color: #fff;
}

.emptyblue
{
    background-color: #fff;
    border-color: #5babef;
    color: #3899ec;
}

.emptyblue:hover, .emptyblue.hover
{
    background-color: $paletteB2;
    border-color: $paletteB2;
    color: #fff;
}

.emptyblue:active, .emptyblue.active
{
    background-color: $B10;
    border-color: $B10;
    color: #fff;
}

.fullpurple
{
    background-color: $P10;
    border-color: $P10;
    color: #fff;
}

.fullpurple:hover, .fullpurple.hover
{
    background-color: $P20;
    border-color: $P20;
}

.fullpurple:active, .fullpurple.active
{
    background-color: $P00;
    border-color: $P00;
    color: #fff;
}

.emptypurple
{
    background-color: #fff;
    border-color: $P10;
    color: $P10;
}

.emptypurple:hover, .emptypurple.hover
{
    background-color: $P20;
    border-color: $P20;
    color: #fff;
}

.emptypurple:active, .emptypurple.active
{
    background-color: $P00;
    border-color: $P00;
    color: #fff;
}

.fullgreen
{
    background-color: $G10;
    border-color: $G10;
    color: #fff;
}

.fullgreen:hover, .fullgreen.hover
{
    background-color: $G20;
    border-color: $G20;
}

.fullgreen:active, .fullgreen.active
{
    background-color: $G00;
    border-color: $G00;
    color: #fff;
}

.emptygreen
{
    background-color: #fff;
    border-color: $G10;
    color: $G10;
}

.emptygreen:hover, .emptygreen.hover
{
    background-color: $G20;
    border-color: $G20;
    color: #fff;
}

.emptygreen:active, .emptygreen.active
{
    background-color: $G00;
    border-color: $G00;
    color: #fff;
}

.fullred
{
    background-color: $R10;
    border-color: $R10;
    color: #fff;
}

.fullred:hover, .fullred.hover
{
    background-color: $R20;
    border-color: $R20;
}

.fullred:active, .fullred.active
{
    background-color: $R00;
    border-color: $R00;
    color: #fff;
}

.emptyred
{
    background-color: #fff;
    border-color: $R10;
    color: $R10;
}

.emptyred:hover, .emptyred.hover
{
    background-color: $R20;
    border-color: $R20;
    color: #fff;
}

.emptyred:active, .emptyred.active
{
    background-color: $R00;
    border-color: $R00;
    color: #fff;
}

.heightsmall
{
    height: 30px;
    border-radius: 15px;
}

.heightmedium
{
    height: 36px;
    border-radius: 15px;
}

.heightlarge
{
    height: 42px;
    border-radius: 26px;
}<commit_msg>Buttons styles according to ui-lib<commit_after>@import '../common.scss';

.button {
    @include FontRoman();
    $height: 36px;
    height: $height;
    border-radius: $height / 2;
    font-size: 16px;
    padding: 0px 24px;

    box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
    transition: 
      color 0.3s ease,
      border-color 0.3s ease,
      background-color 0.3s ease;
    text-align: center;
    border: 1px solid;
    cursor: pointer;
    outline: none;
}

.button>.inner {
    display: flex;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
    font-size: inherit;
    font-family: inherit;
}

.button>div, .button>.inner>div {
    color: inherit;
}

.button.disabled
{
    pointer-events:none;
    background-color: $GR10 !important;
    border-color: $GR10 !important;
    color: #fff !important;
}

.fullblue
{
    background-color: $B10;
    border-color: $B10;
    color: #fff;
}

.fullblue:hover, .fullblue.hover
{
    background-color: $paletteB2;
    border-color: $paletteB2;
}

.fullblue:active, .fullblue.active
{
    background-color: $B00;
    border-color: $B00;
    color: #fff;
}

.emptyblue
{
    background-color: #fff;
    border-color: #5babef;
    color: #3899ec;
}

.emptyblue:hover, .emptyblue.hover
{
    background-color: $paletteB2;
    border-color: $paletteB2;
    color: #fff;
}

.emptyblue:active, .emptyblue.active
{
    background-color: $B10;
    border-color: $B10;
    color: #fff;
}

.fullpurple
{
    background-color: $P10;
    border-color: $P10;
    color: #fff;
}

.fullpurple:hover, .fullpurple.hover
{
    background-color: $P20;
    border-color: $P20;
}

.fullpurple:active, .fullpurple.active
{
    background-color: $P00;
    border-color: $P00;
    color: #fff;
}

.emptypurple
{
    background-color: #fff;
    border-color: $P10;
    color: $P10;
}

.emptypurple:hover, .emptypurple.hover
{
    background-color: $P20;
    border-color: $P20;
    color: #fff;
}

.emptypurple:active, .emptypurple.active
{
    background-color: $P00;
    border-color: $P00;
    color: #fff;
}

.fullgreen
{
    background-color: $G10;
    border-color: $G10;
    color: #fff;
}

.fullgreen:hover, .fullgreen.hover
{
    background-color: $G20;
    border-color: $G20;
}

.fullgreen:active, .fullgreen.active
{
    background-color: $G00;
    border-color: $G00;
    color: #fff;
}

.emptygreen
{
    background-color: #fff;
    border-color: $G10;
    color: $G10;
}

.emptygreen:hover, .emptygreen.hover
{
    background-color: $G20;
    border-color: $G20;
    color: #fff;
}

.emptygreen:active, .emptygreen.active
{
    background-color: $G00;
    border-color: $G00;
    color: #fff;
}

.fullred
{
    background-color: $R10;
    border-color: $R10;
    color: #fff;
}

.fullred:hover, .fullred.hover
{
    background-color: $R20;
    border-color: $R20;
}

.fullred:active, .fullred.active
{
    background-color: $R00;
    border-color: $R00;
    color: #fff;
}

.emptyred
{
    background-color: #fff;
    border-color: $R10;
    color: $R10;
}

.emptyred:hover, .emptyred.hover
{
    background-color: $R20;
    border-color: $R20;
    color: #fff;
}

.emptyred:active, .emptyred.active
{
    background-color: $R00;
    border-color: $R00;
    color: #fff;
}

.heightsmall
{
    $height: 30px;
    height: $height;
    border-radius: $height / 2;
    font-size: 14px;
    padding: 0px 18px;
}

.heightlarge
{
    $height: 42px;
    height: $height;
    border-radius: $height / 2;
}
{'fraction_non_alphanumeric': 0.15444298052993705, 'fraction_numerical': 0.037768994290733424, 'mean_word_length': 2.774585635359116, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '7283237', 'n_tokens_mistral': 2859, 'n_tokens_neox': 2706, 'n_words': 517}