.button_nHYaP {
    /** 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 */
    border: 1px solid var(--sp-color-action-border-default);
    border-radius: var(--sp-radius-300);
    height: var(--button-size);
    gap: var(--sp-spacing-200);
    padding: 0 var(--sp-spacing-300);
    color: var(--sp-color-bg-base);
    transition-duration: var(--sp-duration-short-4), var(--sp-duration-short-4),
        var(--sp-duration-short-4);
    transition-property: background-color, border, opacity;
}

.button_nHYaP:active {
    opacity: 0.2;
}

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

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

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

/* Variations */

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

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

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

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

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

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

/* Pill */

.pill_CjxsT {
    /* 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_CjxsT:active,
.pill_CjxsT:hover,
.pill_CjxsT: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_vXHK5 {
    --button-size: var(--sp-size-button-200);
    --icon-size: var(--sp-size-icon-100);
}

.medium_CpI3p {
    --button-size: var(--sp-size-button-300);
    --icon-size: var(--sp-size-icon-300);
}

.large_Lqq9j {
    --button-size: var(--sp-size-button-400);
    --icon-size: var(--sp-size-icon-300);
}

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

.disabled_vwRFY,
.disabled_vwRFY:hover,
.disabled_vwRFY:active .disabled_vwRFY.active_h-7Mf {
    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;
}

.blank_CprgO.disabled_vwRFY,
.nested_4SkDt.disabled_vwRFY,
.blank_CprgO.disabled_vwRFY:hover,
.nested_4SkDt.disabled_vwRFY:hover,
.blank_CprgO.disabled_vwRFY:active,
.nested_4SkDt.disabled_vwRFY:active,
.blank_CprgO.disabled_vwRFY.active_h-7Mf,
.nested_4SkDt.disabled_vwRFY.active_h-7Mf {
    background-color: transparent;
}

.secondary_N24Yh.disabled_vwRFY,
.secondary_N24Yh.disabled_vwRFY:hover,
.secondary_N24Yh.disabled_vwRFY:active,
.secondary_N24Yh.disabled_vwRFY.active_h-7Mf {
    background-color: var(--sp-color-action-bg-secondary-default);
    border: 1px solid var(--sp-color-action-border-secondary-inactive);
}

.pill_CjxsT.disabled_vwRFY,
.pill_CjxsT.disabled_vwRFY:hover,
.pill_CjxsT.disabled_vwRFY:active,
.pill_CjxsT.disabled_vwRFY.active_h-7Mf,
.pill_CjxsT.disabled_vwRFY: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_-bdo9 {
    border-radius: var(--sp-radius-circle);
}

.iconOnly_t2JNX {
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
}

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