.button_nHYaP {
    --shadow-border-300: 0px 0px 0px 3px;
    --teal-400-transparent-25: hsl(195deg 53% 55% / 25%);
    /** reset browser button styles */
    align-items: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 1px solid transparent;
    border-radius: var(--sp-radius-300);
    color: currentColor;
    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;
    /* end reset browser button styles */
    height: var(--button-size);
    gap: var(--spacing-s);
    padding: var(--sp-spacing-200) var(--sp-spacing-400);
    /* text color gets overwritten only in 'Secondary' class */
    color: var(--sp-color-white);
}

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

    &:hover {
        background-color: var(--sp-color-button-primary-bg-hover);
    }

    &:focus {
        background-color: var(--sp-color-button-primary-bg-focus);
    }
}

/* Secondary button */
.secondary_N24Yh {
    background-color: var(--sp-color-button-secondary-bg-default);
    color: var(--sp-color-text-muted);
    border: 1px solid var(--sp-color-button-secondary-border);

    &:hover {
        background-color: var(--sp-color-button-secondary-bg-hover);
    }

    &:focus {
        background-color: var(--sp-color-button-secondary-bg-focus);
    }
}

/* Muted button */
.muted_V2l4a {
    background-color: var(--sp-color-button-muted-bg-default);
    color: var(--sp-color-text-muted);

    &:hover {
        background-color: var(--sp-color-button-muted-bg-hover);
    }

    &:focus {
        background-color: var(--sp-color-button-muted-bg-focus);
    }
}

/* Link-styled button */
.link_UFR54 {
    background-color: transparent;
    padding: unset;
    display: inline;
}
.link_UFR54 {
    color: var(--sp-color-button-inline-text-default);
    font: var(--sp-typography-ui-small-font);
    letter-spacing: var(--sp-typography-ui-small-letter-spacing);
    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 button --- */

.pill_CjxsT {
    cursor: pointer;
    justify-content: center;
    gap: var(--sp-spacing-200);
    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);
    transition: background-color var(--duration-short), border var(--duration-short),
        box-shadow var(--duration-short);
    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);
}

/* --- 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);
}

.label_7wj5k {
    font: var(--sp-typography-ui-action-font);
    letter-spacing: var(--sp-typography-ui-base-letter-spacing);
}

/* Sizes */

.small_vXHK5 {
    --button-size: var(--button-s);
    --icon-size: var(--icon-xxs);
}

.medium_CpI3p {
    --button-size: var(--button-m);
    --icon-size: var(--icon-xs);
}

.large_Lqq9j {
    --button-size: var(--button-l);
    --icon-size: var(--icon-xs);
}

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

.disabled_vwRFY,
.disabled_vwRFY:hover,
.disabled_vwRFY:active,
.button_nHYaP.disabled_vwRFY:active,
.disabled_vwRFY:focus,
.disabled_vwRFY:focus-visible {
    transition-duration: 0;
    opacity: 1;
    background-color: var(--sp-color-bg-disabled);
    border: 1px solid transparent;
    background-image: none;
    color: var(--sp-color-text-light);
    cursor: not-allowed;
    box-shadow: none;
    outline: none;
}