<commit_before>@mixin button-base {
    text-decoration: none;
    overflow: hidden;
    @include inline-block;
    @include text-align(center);
    cursor: pointer;
    white-space: nowrap;
    border: 0;

    &:hover {
        text-decoration: none;
    }
}

/*doc
---
title: button
name: button
category: Buttons
---

A normal button that triggers an action.

It may have the following states:

-   :focus
-   :hover
-   ng-disabled or :disabled

```html_example
<a class="button">Link</a>
<button type="button">Button</button>
<input type="submit" value="Submit" />
<input type="submit" value="Disabled" disabled="disabled" />
```
*/

/*doc
---
title: button-cta modifier
name: button.button-cta
parent: button
---

A highlighted button. Each page should have one CTA at maxiumum.

```html_example
<a class="button button-cta">Link</a>
<button type="button" class="button-cta">Button</button>
<input type="submit" class="button-cta" value="Submit" />
<input type="submit" class="button-cta" value="Disabled" disabled="disabled" />
```
*/

/*doc
---
title: button-cta-secondary modifier
name: button.button-cta-secondary
parent: button
---

If more than one CTA is required per page, `button-cta-secondary` should
be used instead.

```html_example
<a class="button button-cta-secondary">Link</a>
<button type="button" class="button-cta-secondary">Button</button>
<input type="submit" class="button-cta-secondary" value="Disabled" disabled="disabled" />
```

*/
.button,
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
    @include button-base;
    background: transparent;
    border: 0;
    color: $color-text-highlight-introvert;
    font-size: $font-size-normal;
    font-weight: $font-weight-normal;
    line-height: $button-height;
    height: $button-height * 1em;
    padding: 0;
    text-transform: uppercase;

    &:focus:not(:disabled):not(.ng-disabled),
    &:hover:not(:disabled):not(.ng-disabled) {
        color: $color-text-highlight-normal;
    }

    &:disabled,
    &.ng-disabled {
        &, &:focus, &:hover {
            @include opacity(0.5);
            cursor: default;
        }
    }

    &.button-cta,
    &.button-cta-secondary {
        background: $color-text-highlight-normal;
        color: $color-text-inverted;
        padding: 0 1em;
        min-width: 110px / $font-size-normal * 1em;

        &:hover:not(:disabled):not(.ng-disabled),
        &:focus:not(:disabled):not(.ng-disabled) {
            background: $color-brand-two-extrovert;
            color: $color-text-inverted;
        }

        &:active:not(:disabled):not(.ng-disabled) {
            background-color: $color-brand-two-introvert;
        }
    }

    &.button-cta-secondary {
        background-color: transparent;
        color: $color-text-highlight-normal;
    }
}<commit_msg>Refactor button code<commit_after>@mixin button-base {
    @include inline-block;
    @include text-align(center);
    border: 0;
    cursor: pointer;
    font-size: $font-size-normal;
    font-weight: $font-weight-normal;
    height: $button-height * 1em;
    line-height: $button-height;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
        text-decoration: none;
    }

    &[disabled] {
        @include opacity(0.5);
    }
}

/*doc
---
title: button
name: button
category: Buttons
---

A normal button that triggers an action.

It may have the following states:

-   :focus
-   :hover
-   ng-disabled or :disabled

```html_example
<a class="button" href="">Link</a>
<button type="button" class="button">Button</button>
<input type="submit" class="button" value="Submit" />
<input type="submit" class="button" value="Disabled" disabled="disabled" />
```
*/

/*doc
---
title: button-cta modifier
name: button.button-cta
parent: button
---

A highlighted button. Each page should have one CTA at maxiumum.

```html_example
<a class="button-cta" href="">Link</a>
<button type="button" class="button-cta">Button</button>
<input type="submit" class="button-cta" value="Submit" />
<input type="submit" class="button-cta" value="Disabled" disabled="disabled" />
```
*/

/*doc
---
title: button-cta-secondary modifier
name: button.button-cta-secondary
parent: button
---

If more than one CTA is req uired per page, `button-cta-secondary` should
be used instead.

```html_example
<a class="button-cta-secondary" href="">Link</a>
<button type="button" class="button-cta-secondary">Button</button>
<input type="submit" class="button-cta-secondary" value="Disabled" disabled="disabled" />
```

*/

.button {
    @include button-base;
    background: transparent;
    color: $color-text-highlight-introvert;
    text-transform: uppercase;

    &:focus:enabled,
    &:hover:enabled {
        color: $color-text-highlight-normal;
    }
}

.button-cta,
.button-cta-secondary {
    @include button-base;
    background: $color-text-highlight-normal;
    color: $color-text-inverted;
    padding: 0 1em;
    min-width: 110px / $font-size-normal * 1em;

    &:hover:enabled,
    &:focus:enabled {
        background: $color-brand-two-extrovert;
        color: $color-text-inverted;
    }

    &:active:enabled {
        background-color: $color-brand-two-introvert;
    }
}

.button-cta-secondary {
    background-color: transparent;
    border: 2px solid $color-text-highlight-normal;
    color: $color-text-highlight-normal;
}
{'fraction_non_alphanumeric': 0.16199665986268325, 'fraction_numerical': 0.004453516422341808, 'mean_word_length': 3.274385408406027, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, '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': '5329989', 'n_tokens_mistral': 1826, 'n_tokens_neox': 1751, 'n_words': 382}