<commit_before>.wrapper {
    /* Disable the device's default touch-and-hold behaviour */
    -webkit-touch-callout: none;
}

.button {
    --x-small-font-size: .7rem;
    --small-font-size: .8rem;
    --normal-font-size: .9rem;
    --large-font-size: 1.0rem;
    --x-large-font-size: 1.1rem;
    --xx-large-font-size: 1.4rem;
    --min-size-factor: 2.2;
    --size: calc(var(--air-factor) * var(--font-size));
    --horizontal-padding-factor: .8;
    --vertical-padding-factor: .5;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size);
    line-height: var(--font-size);
    min-height: calc(var(--size) * var(--min-size-factor));
    min-width: calc(var(--size) * var(--min-size-factor));
    padding: 0; /* Needed for alignment of button contents */
}

.button.width-fill span {
    display: inline-block;
    display: flex;
    flex-grow: 1;
}

/* alignment */

.alignment-left {
    justify-content: flex-start;
}

.alignment-center {
    justify-content: center;
}

.alignment-right {
    justify-content: flex-end;
}

/* size */

.size-x-small {
    --font-size: var(--x-small-font-size);
}

.size-small {
    --font-size: var(--small-font-size);
}

.size-normal {
    --font-size: var(--normal-font-size);
}

.size-large {
    --font-size: var(--large-font-size);
}

.size-x-large {
    --font-size: var(--x-large-font-size);
}

.size-xx-large {
    --font-size: var(--xx-large-font-size);
}

/* shape */

.shape-rectangle {
    border-radius: var(--button-border-radius);
    padding: calc(var(--size) * var(--vertical-padding-factor)) calc(var(--size) * var(--horizontal-padding-factor));
}

.shape-rectangle.join-right {
    border-right: .5px solid;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.shape-rectangle.join-left {
    border-left: .5px solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shape-pill {
    border-radius: 500px;
    padding: calc(var(--size) * var(--vertical-padding-factor)) calc(var(--size) * var(--horizontal-padding-factor));
}

.shape-pill.join-right {
    border-right: .5px solid;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.shape-pill.join-left {
    border-left: .5px solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shape-circle {
    border-radius: 50%;
}

.shape-none {
    --air-factor: 0;
    padding: 0;
    border: none !important;
    background: none !important;
}

/* width */

.width-fit {
    width: fit-content;
}

.width-fill {
    flex-grow: 1;
    flex-shrink: 1;
}

.width-max {
    width: 100%;
    flex-grow: 1;
}

.button.width-max > *,
.button.width-fill > * {
    display: flex;
    flex-grow: 1;
}

/* air */

.air-normal {
    --air-factor: 1;
}

.air-more {
    /* normal +20% */
    --air-factor: 1.2;
}

.air-less {
    /* normal -20% */
    --air-factor: .8;
}

.air-none {
    --air-factor: 0;
}

/* contents */

.button > * {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* spacing between icon and label */

.button > .contents > * + * {
    margin-left: .5rem;
}

/* labelStyle: smallcaps */

.button.labelStyle-smallcaps > .contents {
    font-size: calc(var(--font-size) * .9);
    line-height: calc(var(--font-size) * .9);
    font-weight: 800;
    opacity: .6;
    text-transform: uppercase;
}

/* labelStyle: smallcaps-highlight */

.button.labelStyle-smallcaps-highlight > .contents {
    font-size: calc(var(--font-size) * .9);
    line-height: calc(var(--font-size) * .9);
    font-weight: 800;
    opacity: .75;
    text-transform: uppercase;
    color: var(--success-color);
}

/* click-hold */

.button.hold {
    outline: none;
    overflow: hidden;
    vertical-align: bottom;
}

.button.hold:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
}

/* click-and-hold effect */
.button.hold:not(:disabled):hover:active:before {
    animation: fill var(--click-hold-duration-ms) ease-out var(--click-hold-delay-ms) forwards normal;
}

@keyframes fill {
    0% {
        top: 80%;
        background-color: hsla(0, 0%, 100%, .1);
        }
    99% {
        top: 0;
        background-color: hsla(0, 0%, 100%, .1);
    }
    100% {
        top: 0;
        background-color: hsla(var(--look-cancel-h), 70%, var(--look-cancel-l), 1);
    }
}

.button.hint {
    animation-name: hint;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(0, .5, .5, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes hint {
    0% {
        background-color: lime;
    }
    100% {
        background-color: inherit;
    }
}
<commit_msg>Disabled Button contents user-select.<commit_after>.wrapper {
    /* Disable the device's default touch-and-hold behaviour */
    -webkit-touch-callout: none;
}

.button {
    --x-small-font-size: .7rem;
    --small-font-size: .8rem;
    --normal-font-size: .9rem;
    --large-font-size: 1.0rem;
    --x-large-font-size: 1.1rem;
    --xx-large-font-size: 1.4rem;
    --min-size-factor: 2.2;
    --size: calc(var(--air-factor) * var(--font-size));
    --horizontal-padding-factor: .8;
    --vertical-padding-factor: .5;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    font-size: var(--font-size);
    line-height: var(--font-size);
    min-height: calc(var(--size) * var(--min-size-factor));
    min-width: calc(var(--size) * var(--min-size-factor));
    padding: 0; /* Needed for alignment of button contents */
}

.button.width-fill span {
    display: inline-block;
    display: flex;
    flex-grow: 1;
}

/* alignment */

.alignment-left {
    justify-content: flex-start;
}

.alignment-center {
    justify-content: center;
}

.alignment-right {
    justify-content: flex-end;
}

/* size */

.size-x-small {
    --font-size: var(--x-small-font-size);
}

.size-small {
    --font-size: var(--small-font-size);
}

.size-normal {
    --font-size: var(--normal-font-size);
}

.size-large {
    --font-size: var(--large-font-size);
}

.size-x-large {
    --font-size: var(--x-large-font-size);
}

.size-xx-large {
    --font-size: var(--xx-large-font-size);
}

/* shape */

.shape-rectangle {
    border-radius: var(--button-border-radius);
    padding: calc(var(--size) * var(--vertical-padding-factor)) calc(var(--size) * var(--horizontal-padding-factor));
}

.shape-rectangle.join-right {
    border-right: .5px solid;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.shape-rectangle.join-left {
    border-left: .5px solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shape-pill {
    border-radius: 500px;
    padding: calc(var(--size) * var(--vertical-padding-factor)) calc(var(--size) * var(--horizontal-padding-factor));
}

.shape-pill.join-right {
    border-right: .5px solid;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.shape-pill.join-left {
    border-left: .5px solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shape-circle {
    border-radius: 50%;
}

.shape-none {
    --air-factor: 0;
    padding: 0;
    border: none !important;
    background: none !important;
}

/* width */

.width-fit {
    width: fit-content;
}

.width-fill {
    flex-grow: 1;
    flex-shrink: 1;
}

.width-max {
    width: 100%;
    flex-grow: 1;
}

.button.width-max > *,
.button.width-fill > * {
    display: flex;
    flex-grow: 1;
}

/* air */

.air-normal {
    --air-factor: 1;
}

.air-more {
    /* normal +20% */
    --air-factor: 1.2;
}

.air-less {
    /* normal -20% */
    --air-factor: .8;
}

.air-none {
    --air-factor: 0;
}

/* contents */

.button > * {
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.button .contents {
    user-select: none;
}

/* spacing between icon and label */

.button > .contents > * + * {
    margin-left: .5rem;
}

/* labelStyle: smallcaps */

.button.labelStyle-smallcaps > .contents {
    font-size: calc(var(--font-size) * .9);
    line-height: calc(var(--font-size) * .9);
    font-weight: 800;
    opacity: .6;
    text-transform: uppercase;
}

/* labelStyle: smallcaps-highlight */

.button.labelStyle-smallcaps-highlight > .contents {
    font-size: calc(var(--font-size) * .9);
    line-height: calc(var(--font-size) * .9);
    font-weight: 800;
    opacity: .75;
    text-transform: uppercase;
    color: var(--success-color);
}

/* click-hold */

.button.hold {
    outline: none;
    overflow: hidden;
    vertical-align: bottom;
}

.button.hold:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
}

/* click-and-hold effect */
.button.hold:not(:disabled):hover:active:before {
    animation: fill var(--click-hold-duration-ms) ease-out var(--click-hold-delay-ms) forwards normal;
}

@keyframes fill {
    0% {
        top: 80%;
        background-color: hsla(0, 0%, 100%, .1);
        }
    99% {
        top: 0;
        background-color: hsla(0, 0%, 100%, .1);
    }
    100% {
        top: 0;
        background-color: hsla(var(--look-cancel-h), 70%, var(--look-cancel-l), 1);
    }
}

.button.hint {
    animation-name: hint;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(0, .5, .5, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes hint {
    0% {
        background-color: lime;
    }
    100% {
        background-color: inherit;
    }
}

{'fraction_non_alphanumeric': 0.19069037656903765, 'fraction_numerical': 0.022594142259414227, 'mean_word_length': 2.3197916666666667, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, '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': '6527392', 'n_tokens_mistral': 3777, 'n_tokens_neox': 3608, 'n_words': 657}