.er-ds .er-button,
.er-ds .er-button.e-btn {
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--er-ds-button-height);
    min-width: 10.5rem;
    padding-block: calc(var(--er-ds-button-padding-y) + 0.02rem) calc(var(--er-ds-button-padding-y) - 0.02rem);
    padding-inline: calc(var(--er-ds-button-padding-x) + 0.18rem);
    border: 1.5px solid transparent;
    border-radius: calc(var(--er-ds-button-height) / 2);
    font-family: var(--er-ds-font-family-action);
    font-size: var(--er-ds-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--er-motion-fast), background-color var(--er-motion-fast), color var(--er-motion-fast), box-shadow var(--er-motion-fast);
}

.er-ds .er-button:focus-visible,
.er-ds .er-button.e-btn:focus-visible {
    outline: 2px solid var(--er-color-focus-ring);
    outline-offset: 2px;
}

.er-ds .er-button--primary,
.er-ds .er-button--primary.e-btn {
    background-color: var(--er-color-action-primary);
    color: #FFFFFF;
}

.er-ds .er-button--primary:hover,
.er-ds .er-button--primary.e-btn:hover {
    background-color: var(--er-color-action-primary-hover);
}

.er-ds .er-button--secondary,
.er-ds .er-button--secondary.e-btn {
    background-color: #FFFFFF;
    border-color: var(--er-color-action-accent);
    color: var(--er-color-action-accent);
}

.er-ds .er-button--secondary:hover,
.er-ds .er-button--secondary.e-btn:hover {
    background-color: rgba(251, 90, 108, 0.04);
    border-color: var(--er-color-action-accent);
    color: var(--er-color-action-accent);
}

.er-ds .er-button--quiet,
.er-ds .er-button--quiet.e-btn {
    background-color: rgba(10, 36, 99, 0.06);
    color: var(--er-color-action-secondary);
}

.er-ds .er-button--quiet:hover,
.er-ds .er-button--quiet.e-btn:hover {
    background-color: rgba(10, 36, 99, 0.1);
}

.er-ds .er-button--ghost,
.er-ds .er-button--ghost.e-btn {
    min-width: auto;
    background-color: transparent;
    border-color: transparent;
    color: var(--er-color-action-secondary);
    padding-inline: 0.25rem;
}

.er-ds .er-button--small,
.er-ds .er-button--small.e-btn {
    min-height: var(--er-ds-button-height-sm);
    min-width: auto;
    border-radius: calc(var(--er-ds-button-height-sm) / 2);
    padding-block: calc(var(--er-ds-button-padding-y-sm) + 0.02rem) calc(var(--er-ds-button-padding-y-sm) - 0.02rem);
    padding-inline: calc(var(--er-ds-button-padding-x-sm) + 0.18rem);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}