<commit_before>@import button-mixin

/*
 TopCoat Icon Button
 -------------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button {
    button-base()
    //  TODO: See if we can check for existance of
    //        topcoat-button to limit duplication
    padding: var-padding--icon;
    margin: var-margin;
    font-size: var-font-size;
    line-height: var-line-height;
    letter-spacing: var-letter-spacing;
    color: var-color;
    text-shadow: var-text-shadow;
    vertical-align: var-vertical-align;
    background-color: var-background-color;
    box-shadow: var-box-shadow;
    border: var-border;
    border-radius: var-border-radius;

}

.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
    background-color: var-background-color--down;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {
    disabled()
}

/*
 TopCoat Quiet Icon Button
 --------------------

 :active - Button active state

 .is-active - Simulates active state for a button on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-icon-button--quiet">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--quiet is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--quiet is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button--quiet {
    @extend .topcoat-icon-button
    button-base--quiet()
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet.is-active {
    color: var-color;
    text-shadow: var-text-shadow;
    background-color: var-background-color--down;
    border: var-border;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--quiet.is-disabled {
    disabled()
}

/*
 TopCoat Large Icon Button
 -------------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button--large">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--large is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--large is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button--large {
    @extend .topcoat-icon-button
    width: var-width--large-icon;
    height: var-height--large--icon;
}

.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
    background-color: var-background-color--down;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {<commit_msg>Fixing typo in larg icon width<commit_after>@import button-mixin

/*
 TopCoat Icon Button
 -------------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button {
    button-base()
    //  TODO: See if we can check for existance of
    //        topcoat-button to limit duplication
    padding: var-padding--icon;
    margin: var-margin;
    font-size: var-font-size;
    line-height: var-line-height;
    letter-spacing: var-letter-spacing;
    color: var-color;
    text-shadow: var-text-shadow;
    vertical-align: var-vertical-align;
    background-color: var-background-color;
    box-shadow: var-box-shadow;
    border: var-border;
    border-radius: var-border-radius;

}

.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
    background-color: var-background-color--down;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {
    disabled()
}

/*
 TopCoat Quiet Icon Button
 --------------------

 :active - Button active state

 .is-active - Simulates active state for a button on touch interfaces

 :disabled - Disabled state

 .is-disabled - Simulates disabled state

    <a class="topcoat-icon-button--quiet">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--quiet is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--quiet is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button--quiet {
    @extend .topcoat-icon-button
    button-base--quiet()
}

.topcoat-icon-button--quiet:active,
.topcoat-icon-button--quiet.is-active {
    color: var-color;
    text-shadow: var-text-shadow;
    background-color: var-background-color--down;
    border: var-border;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button--quiet:disabled,
.topcoat-icon-button--quiet.is-disabled {
    disabled()
}

/*
 TopCoat Large Icon Button
 -------------------

 :active - Active state

 .is-active - Simulates an active state on mobile devices

 :disabled - Disabled state

 .is-disabled - Simulates a disabled state on mobile devices

    <a class="topcoat-icon-button--large">
        <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--large is-active">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>

    <a class="topcoat-icon-button--large is-disabled">
      <i class="topcoat-icon topcoat-icon--menu-stack"></i>
    </a>
*/

.topcoat-icon-button--large {
    @extend .topcoat-icon-button
    width: var-width--large--icon;
    height: var-height--large--icon;
}

.topcoat-icon-button:active,
.topcoat-icon-button.is-active {
    background-color: var-background-color--down;
    box-shadow: var-box-shadow--down;
}

.topcoat-icon-button:disabled,
.topcoat-icon-button.is-disabled {
{'fraction_non_alphanumeric': 0.1700710479573712, 'fraction_numerical': 0.0, 'mean_word_length': 2.65440778799351, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 75, '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': '216185', 'n_tokens_mistral': 2372, 'n_tokens_neox': 2217, 'n_words': 445}