* {
    box-sizing: border-box;
}

*:active {
    outline: none;
}

*:focus {
    outline: none;
    box-shadow: var(--const-global-focus);
}

input,
button {
    font-family: inherit;
    font-size: inherit;
}

.sr,
.sr button {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.hidden,
[hidden] {
    display: none;
}

.invisible {
    visibility: hidden;
}


q2-btn {
    display: inline-block;
}

q2-btn[hidden] {
    display: none;
}

q2-btn[block] {
    display: block;
    width: 100%;
}

q2-btn button {
    --q2-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2E2E2E));
    --q2-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, #FFFFFF));
    --q2-btn-primary-box-shadow: var(--tct-btn-primary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
    --q2-btn-primary-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));
    --q2-btn-secondary-bg: var(--tct-btn-secondary-bg, var(--t-button-default-bg, #CCCCCC));
    --q2-btn-secondary-font-color: var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2E2E2E));
    --q2-btn-secondary-box-shadow: var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
    --q2-btn-secondary-hover-box-shadow: var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));
    --q2-btn-tween: var(--tct-btn-tween, var(--tct-tween-1 var(--app-tween-1, 0.2s ease)));
    --q2-btn-neutral-bg: var(--tct-btn-neutral-bg, transparent);
    --q2-btn-neutral-font-color: var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2E2E2E));
    --q2-btn-neutral-box-shadow: var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24));
    --q2-btn-neutral-hover-box-shadow: var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36));

    margin: var(--tct-scale-0, var(--app-scale-0, 0));
    padding: var(--tct-scale-0, var(--app-scale-0, 0));
    display: inline-block;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    font-weight: 400;
    color: inherit;
    cursor: pointer;
    transition:
        background-color var(--q2-btn-tween),
        color var(--q2-btn-tween),
        box-shadow var(--q2-btn-tween),
        fill var(--q2-btn-tween),
        border-color var(--q2-btn-tween),
        border-width var(--q2-btn-tween);
    outline: 0;
}

q2-btn button:disabled {
    opacity: var(--tct-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
    cursor: not-allowed;
}

/*
 * BUTTON SIZES
 */
q2-btn[size="1"] button {
    padding: var(--tct-scale-1, var(--app-scale-1, 5px));
}

q2-btn[color]:not[size] button, 
q2-btn[intent]:not[size] button {
    padding: var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
}

q2-btn[size="2"] button {
    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
}

q2-btn[size="3"] button {
    padding: var(--tct-scale-3, var(--app-scale-3, 15px));
}

q2-btn[size="4"] button {
    padding: var(--tct-scale-4, var(--app-scale-4, 30px));
}

/*
* BUTTON COLORS. Note: the color attribute is deprecated in favor of "intent." All new options other than primary or secondary should be supported only by the intent attribute. See TCT-1052
*/
q2-btn[color] button,
q2-btn[intent] button {
    border-style: solid;
    font-size: var(--tct-btn-font-size, inherit);
}

q2-btn[color="primary"] button,
q2-btn[intent="workflow-primary"] button {
    background: var(--q2-btn-primary-bg);
    color: var(--q2-btn-primary-font-color);
    border-color: var(--tct-btn-primary-border-color, transparent);
    border-width: var(--tct-btn-primary-border-width, 0);
    border-radius: var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
    box-shadow: var(--q2-btn-primary-box-shadow);
    font-weight: var(--tct-btn-primary-font-weight, 600);
    text-transform: var(--tct-btn-primary-text-transform, none);
    letter-spacing: var(--tct-btn-primary-letter-spacing, normal);
}

q2-btn[color="primary"] button:enabled:hover, 
q2-btn[color="primary"] button:enabled:focus,
q2-btn[color="primary"] button:enabled:active,
q2-btn[intent="workflow-primary"] button:enabled:hover, 
q2-btn[intent="workflow-primary"] button:enabled:focus,
q2-btn[intent="workflow-primary"] button:enabled:active {
    background: var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, #4A4A4A));
    color: var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, #FFFFFF));
    border-color: var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent));
}

q2-btn[color="primary"] button:hover:enabled,
q2-btn[color="primary"] button:active:enabled,
q2-btn[intent="workflow-primary"] button:hover:enabled,
q2-btn[intent="workflow-primary"] button:active:enabled {
    box-shadow:  var(--q2-btn-primary-hover-box-shadow);
}

q2-btn[color="primary"] button:focus,
q2-btn[intent="workflow-primary"] button:focus {
    box-shadow:  var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-primary-hover-box-shadow);
}

q2-btn[color="primary"] button:disabled,
q2-btn[intent="workflow-primary"] button:disabled {
    background: var(--tct-btn-primary-disabled-bg, var(--q2-btn-primary-bg));
    color: var(--tct-btn-primary-disabled-font-color, var(--q2-btn-primary-font-color));
    box-shadow:  var(--tct-btn-primary-disabled-box-shadow, var(--q2-btn-primary-box-shadow));
}

q2-btn[color="secondary"] button,
q2-btn[intent="workflow-secondary"] button {
    background: var(--q2-btn-secondary-bg);
    color: var(--q2-btn-secondary-font-color);
    border-color: var(--tct-btn-secondary-border-color, transparent);
    border-width: var(--tct-btn-secondary-border-width, 0);
    border-radius: var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
    box-shadow: var(--q2-btn-secondary-box-shadow);
    font-weight: var(--tct-btn-secondary-font-weight, 600);
    text-transform: var(--tct-btn-secondary-text-transform, none);
    letter-spacing: var(--tct-btn-secondary-letter-spacing, normal);
}

q2-btn[color="secondary"] button:enabled:hover,
q2-btn[color="secondary"] button:enabled:focus,
q2-btn[color="secondary"] button:enabled:active,
q2-btn[intent="workflow-secondary"] button:enabled:hover,
q2-btn[intent="workflow-secondary"] button:enabled:focus,
q2-btn[intent="workflow-secondary"] button:enabled:active {
    background: var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, #2E2E2E));
    color: var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, #FFFFFF));
    border-color: var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent));
}

q2-btn[color="secondary"] button:hover:enabled,
q2-btn[color="secondary"] button:active:enabled,
q2-btn[intent="workflow-secondary"] button:hover:enabled,
q2-btn[intent="workflow-secondary"] button:active:enabled {
    box-shadow:  var(--q2-btn-secondary-hover-box-shadow);
}

q2-btn[color="secondary"] button:focus,
q2-btn[intent="workflow-secondary"] button:focus {
    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-secondary-hover-box-shadow);
}

q2-btn[color="secondary"] button:disabled,
q2-btn[intent="workflow-secondary"] button:disabled {
    background: var(--tct-btn-secondary-disabled-bg, var(--q2-btn-secondary-bg));
    color: var(--tct-btn-secondary-disabled-font-color, var(--q2-btn-secondary-font-color));
    box-shadow:  var(--tct-btn-secondary-disabled-box-shadow, var(--q2-btn-secondary-box-shadow));
}

q2-btn[intent="neutral"] button {
    background: var(--q2-btn-neutral-bg, transparent);
    color: var(--q2-btn-neutral-font-color);
    border-color: var(--tct-btn-neutral-border-color, transparent);
    border-width: var(--tct-btn-neutral-border-width, 0);
    border-radius: var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
    box-shadow: var(--q2-btn-neutral-box-shadow);
    font-weight: var(--tct-btn-neutral-font-weight, 600);
    text-transform: var(--tct-btn-neutral-text-transform, none);
    letter-spacing: var(--tct-btn-neutral-letter-spacing, normal);
}

q2-btn[intent="neutral"] button:enabled:hover,
q2-btn[intent="neutral"] button:enabled:focus,
q2-btn[intent="neutral"] button:enabled:active {
    background: var(--tct-btn-neutral-hover-bg, transparent);
    color: var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, #FFFFFF));
    border-color: var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent));
}

q2-btn[intent="neutral"] button:hover:enabled,
q2-btn[intent="neutral"] button:active:enabled {
    box-shadow:  var(--q2-btn-neutral-hover-box-shadow);
}

q2-btn[intent="neutral"] button:focus {
    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-neutral-hover-box-shadow);
}

q2-btn[intent="neutral"] button:disabled {
    background: var(--tct-btn-neutral-disabled-bg, var(--q2-btn-neutral-bg));
    color: var(--tct-btn-neutral-disabled-font-color, var(--q2-btn-neutral-font-color));
    box-shadow:  var(--tct-btn-neutral-disabled-box-shadow, var(--q2-btn-neutral-box-shadow));
}

q2-btn[icon] button {
    width: var(--tct-btn-icon-width, 44px);
    height: var(--tct-btn-icon-height, 44px);
    color: var(--tct-btn-icon-color, inherit);
}

q2-btn[icon] button:hover,
q2-btn[icon] button:focus,
q2-btn[icon][active] button {
    background-color: var(--tct-btn-icon-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)));
}

q2-btn[icon] button:hover *,
q2-btn[icon] button:focus *,
q2-btn[icon][active] button *{
    color: var(--tct-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color,#080808)));
}

q2-btn[icon] button div {
    display: flex;
    justify-content: center;
    align-items: center;
}

q2-btn[badge] button {
    padding: var(--tct-btn-badge-padding, 2px 5px);
    font-size: var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));
    border-radius:  var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
    background-color: var(--tct-btn-badge-bg, transparent);
    color: var(--tct-btn-badge-font-color, inherit);
}

q2-btn[badge]:hover button:enabled {
    background-color: var(--tct-btn-badge-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)));
    color: var(--tct-btn-badge-hover-font-color, #2E2E2E);
}

q2-btn.selected[badge] button,
q2-btn[active][badge] button {
    background-color: var(--tct-btn-badge-active-bg, var(--q2-btn-primary-bg));
    color: var(--tct-btn-badge-active-font-color, var(--q2-btn-primary-font-color));
}