/**
 * Button reset - using :where to reduce specificity to 0
 * allowing overrides from utilities and other css modules
 */
:where(.button_Bm4Qo) {
    /** reset browser button styles */
    align-items: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    flex-basis: auto;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    outline: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    text-decoration-line: none;
    /* end reset browser button styles */
    padding-inline: var(--padding-inline-size, --sp-spacing-300);
}

.button_Bm4Qo {
    border: 1px solid var(--sp-color-action-border-default);
    border-radius: var(--sp-radius-300);
    height: var(--button-size);
    gap: var(--sp-spacing-200);
    color: var(--sp-color-bg-base);
    transition-duration: var(--sp-duration-short-4), var(--sp-duration-short-4),
        var(--sp-duration-short-4), var(--sp-duration-short-4);
    transition-property: width, background-color, border, opacity;
}

.button_Bm4Qo:active {
    opacity: 0.2;
}

.button_Bm4Qo:focus {
    box-shadow: var(--sp-focus-ring);
    outline: transparent solid 2px;
}

.button_Bm4Qo:not(:focus-visible) {
    box-shadow: none;
    outline: 0;
}

.button_Bm4Qo:focus-visible {
    box-shadow: var(--sp-focus-ring);
    outline: transparent solid 2px;
}

/* Variations */

/* Primary */
.primary_QgLzZ {
    background-color: var(--sp-color-action-bg-primary-default);
}
.primary_QgLzZ:hover {
    background-color: var(--sp-color-action-bg-primary-hover);
}

/* Merge */
.merge_ZGL25 {
    background-color: var(--sp-color-action-bg-merge-default);
}
.merge_ZGL25:hover {
    background-color: var(--sp-color-action-bg-merge-hover);
}

/* Danger */
.danger_rD7B- {
    background-color: var(--sp-color-action-bg-danger-default);
}
.danger_rD7B-:hover {
    background-color: var(--sp-color-action-bg-danger-hover);
}

/* Upgrade */
.upgrade_TYMON {
    background-color: var(--sp-color-action-bg-upgrade-default);
}
.upgrade_TYMON:hover {
    background-color: var(--sp-color-action-bg-upgrade-hover);
}

/* Secondary, Blank, Nested  */
.secondary_4jL2N {
    background-color: var(--sp-color-action-bg-secondary-default);
    border: 1px solid var(--sp-color-border-base);
}
.secondary_4jL2N,
.blank_-yPOL,
.nested_0lLSK {
    color: var(--sp-color-text-muted);
}
.secondary_4jL2N:hover,
.blank_-yPOL:hover,
.nested_0lLSK:hover {
    color: var(--sp-color-text-base);
}
.blank_-yPOL,
.nested_0lLSK {
    background-color: transparent;
}
.secondary_4jL2N:hover,
.blank_-yPOL:hover {
    background-color: var(--sp-color-action-bg-secondary-hover);
}
.nested_0lLSK:hover {
    background-color: var(--sp-color-action-bg-nested-hover);
}

.secondary_4jL2N.active_3i1bB,
.blank_-yPOL.active_3i1bB,
.nested_0lLSK.active_3i1bB {
    background-color: var(--sp-color-action-bg-active);
    color: var(--sp-color-action-text-active);
}

.blank_-yPOL.inverted_cmgA0,
.nested_0lLSK.inverted_cmgA0 {
    background-color: var(--sp-color-action-bg-blank-inverted-default);
    color: var(--sp-color-text-inverted);
}
.blank_-yPOL.inverted_cmgA0:hover,
.nested_0lLSK.inverted_cmgA0:hover {
    background-color: var(--sp-color-action-bg-blank-inverted-hover);
}

/* Link-style ? */
.link_whYow {
    background-color: transparent;
    color: var(--sp-color-button-inline-text-default);
    padding: unset;
    display: inline-flex;
    text-decoration-line: underline;
}
.link_whYow:hover {
    color: var(--sp-color-button-inline-text-hover);
}
.link_whYow:focus {
    color: var(--sp-color-button-inline-text-focus);
}

/* Pill */

.pill_r0AlE {
    /* component vars */
    --shadow-border-300: 0px 0px 0px 3px;
    --teal-400-transparent-25: hsl(195deg 53% 55% / 25%);
    /* end component vars */
    width: -moz-fit-content;
    width: fit-content;
    padding: var(--sp-spacing-100) var(--sp-spacing-250);
    border-radius: var(--sp-radius-pill);
    color: var(--sp-color-button-pill-text);
    background-color: var(--sp-color-bg-secondary);
    border: 1px solid transparent;
    /* Since the text in suggestions pill can be multiline, 
    * its height needs to adapt to its content and the text to align left.
    * We also need to align itself center in the flex flow to avoid siblind pills to grow in height. */
    height: auto;
    text-align: left;
    align-self: center;
}

.pill_r0AlE:active,
.pill_r0AlE:hover,
.pill_r0AlE:focus-visible {
    background-color: var(--sp-color-button-pill-bg-active);
    border: 1px solid var(--sp-color-button-pill-border);
    box-shadow: var(--shadow-border-300) var(--teal-400-transparent-25);
}

/* Sizes */

.small_zn9Me {
    --button-size: var(--sp-size-button-200);
    --icon-size: var(--sp-size-icon-100);
    --padding-inline-size: var(--sp-spacing-200);
}

.medium_gZx9r {
    --button-size: var(--sp-size-button-300);
    --icon-size: var(--sp-size-icon-300);
    --padding-inline-size: var(--sp-spacing-300);
}

.large_OoX2J {
    --button-size: var(--sp-size-button-400);
    --icon-size: var(--sp-size-icon-300);
    --padding-inline-size: var(--sp-spacing-300);
}

/* --- Disabled state --- */

.disabled_cBE9H,
.disabled_cBE9H:hover,
.disabled_cBE9H:active .disabled_cBE9H.active_3i1bB {
    transition-duration: var(--sp-duration-immediate);
    opacity: 1;
    background-color: var(--sp-color-bg-inactive);
    background-image: none;
    color: var(--sp-color-text-light);
    cursor: not-allowed;
    box-shadow: none;
    outline: none;
}

.nested_0lLSK.disabled_cBE9H,
.nested_0lLSK.disabled_cBE9H:hover,
.nested_0lLSK.disabled_cBE9H:active,
.nested_0lLSK.disabled_cBE9H.active_3i1bB {
    background-color: transparent;
}

.pill_r0AlE.disabled_cBE9H,
.pill_r0AlE.disabled_cBE9H:hover,
.pill_r0AlE.disabled_cBE9H:active,
.pill_r0AlE.disabled_cBE9H.active_3i1bB,
.pill_r0AlE.disabled_cBE9H:active {
    transition-duration: var(--sp-duration-immediate);
    opacity: 1;
    background-color: var(--sp-color-bg-inactive);
    background-image: none;
    border-color: var(--sp-color-action-border-default);
    color: var(--sp-color-text-light);
    cursor: not-allowed;
    box-shadow: none;
    outline: none;
}

/* --- Customization classes --- */

.rounded_VAgzH {
    border-radius: var(--sp-radius-circle);
}

.button_Bm4Qo.iconOnly_tRp0e {
    --icon-size: var(--sp-size-icon-300);
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
}

.button_Bm4Qo.iconOnly_tRp0e.small_zn9Me {
    --icon-size: var(--sp-size-icon-200);
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
}

.icon_DDqLX {
    width: var(--icon-size);
    min-width: var(--icon-size);
    height: var(--icon-size);
}