.button {
    align-items: flex-start;
    background-color: var(--interactive-primary);
    border-color: var(--interactive-primary);
    border-width: var(--button-border-width);
    border-radius: var(--button-border-radius);
    border-style: solid;
    color: var(--button-primary-text-color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size);
    font-weight: var(--font-weight-button);
    hyphens: inherit;
    letter-spacing: var(--letter-spacing-2m);
    line-height: var(--line-height-2xs);
    margin: var(--margin-xxxs) var(--margin-xxxs) var(--margin-xxl);
    padding: calc(var(--button-vertical-padding) - var(--button-border-width)) calc(var(--button-horizontal-padding) - var(--button-border-width));
    text-align: center;
    text-transform: var(--button-text-transform);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    user-select: none;
    width: auto;
    word-break: break-word;
    height: 48px;
}

.button:hover {
    background-color: var(--button-primary-hover-background-color);
    border-color: var(--button-primary-hover-border-color);
    color: var(--button-primary-hover-text-color)
}

.button:active {
    background-color: var(--button-primary-active-background-color);
    border-color: var(--button-primary-active-border-color);
    color: var(--button-primary-active-text-color)
}

.button:focus {
    outline: calc(var(--size-xs) - var(--button-border-width))
}

[data-whatinput=keyboard] .button:focus {
    transition: color .2s ease, outline .2s ease;
    border-radius: var(--accessibility-border-radius);
    outline: var(--accessibility-border) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-space-border)
}

.button:disabled {
    background-color: var(--button-primary-disabled-background-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--button-primary-disabled-text-color);
    cursor: not-allowed
}

@media (max-width: 779px) {
    .button {
        width: 100%
    }
}

.button.button--block {
    width: 100%
}

.button--secondary {
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--interactive-primary);
    color: var(--interactive-text)
}

.button--secondary:hover {
    border-color: var(--hover-primary);
    color: var(--default-white)
}

.button--secondary:active {
    border-color: var(--active-primary);
    color: var(--default-white)
}

.button--secondary:disabled {
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--button-secondary-disabled-border-color);
    color: var(--button-secondary-disabled-text-color);
    cursor: not-allowed
}

.button--negative, .theme--negative .button {
    background-color: var(--button-secondary-background-color);
    border-color: var(--negative);
    color: var(--negative)
}

.button--negative:hover, .theme--negative .button:hover {
    background-color: var(--negative-01);
    border-color: var(--negative-01);
    color: var(--interactive-text)
}

.button--negative:active, .theme--negative .button:active {
    background-color: var(--negative-02);
    border-color: var(--negative-02);
    color: var(--interactive-text)
}

.button--negative:disabled, .theme--negative .button:disabled {
    background-color: var(--button-primary-disabled-text-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--negative-background-dimmed)
}

.button--negative.button--secondary, .theme--negative .button.button--secondary {
    color: var(--negative-01);
    background-color: rgba(0, 0, 0, 0)
}

.button--negative.button--secondary:hover, .theme--negative .button.button--secondary:hover {
    background-color: var(--negative-01);
    border-color: var(--negative-01);
    color: var(--interactive-text)
}

.button--negative.button--secondary:active, .theme--negative .button.button--secondary:active {
    background-color: var(--negative-02);
    border-color: var(--negative-02);
    color: var(--interactive-text)
}

.button--negative.button--secondary:disabled, .theme--negative .button.button--secondary:disabled {
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--negative-dimmed);
    color: var(--negative-dimmed)
}

.button--large {
    font-size: var(--font-size-xs);
    padding: var(--size-m) var(--size-4m)
}

.button--large .button__icon {
    font-size: var(--font-size-xs)
}

@media (max-width: 703px) {
    .button--large {
        padding: calc(var(--size-m) - var(--button-border-width)) calc(var(--size-2m) - var(--button-border-width))
    }
}

.button--small {
    display: inline-block;
    font-size: var(--font-size-4xs);
    line-height: var(--line-height-4xs);
    padding: calc(var(--size-2xs) - var(--button-border-width)) calc(var(--size-s) - var(--button-border-width));
    text-transform: none;
    width: auto
}

.button--small .button__icon {
    font-size: var(--font-size-4xs)
}

.button--cta {
    background-color: var(--button-cta-background-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--button-cta-text-color)
}

.button--cta:focus {
    background-color: var(--button-cta-background-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--button-cta-text-color)
}

.button--cta:hover {
    background-color: var(--button-cta-hover-background-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--button-cta-hover-text-color)
}

.button--cta:active {
    background-color: var(--button-cta-active-background-color);
    border-color: rgba(0, 0, 0, 0);
    color: var(--button-cta-active-text-color)
}

.button--cta:disabled {
    background-color: var(--button-cta-disabled-background-color);
    color: var(--button-cta-disabled-text-color)
}

.button--emphasis {
    background-color: var(--button-emphasis-background-color);
    border-color: var(--button-emphasis-border-color);
    color: var(--button-emphasis-text-color)
}

.button--emphasis:focus {
    background-color: var(--button-emphasis-active-background-color);
    border-color: var(--button-emphasis-hover-border-color);
    color: var(--button-emphasis-active-text-color)
}

.button--emphasis:hover {
    background-color: var(--button-emphasis-hover-background-color);
    border-color: var(--button-emphasis-hover-border-color);
    color: var(--button-emphasis-hover-text-color)
}

.button--emphasis:active {
    background-color: var(--button-emphasis-active-background-color);
    border-color: var(--button-emphasis-active-border-color);
    color: var(--button-emphasis-active-text-color)
}

.button--emphasis:disabled {
    background-color: var(--button-emphasis-disabled-background-color);
    color: var(--button-emphasis-disabled-text-color)
}

.button--danger {
    background-color: var(--button-primary-danger-background-color);
    border-color: var(--button-primary-danger-border-color);
    color: var(--button-primary-danger-text-color)
}

.button--danger:focus {
    background-color: var(--button-primary-danger-active-background-color);
    border-color: var(--button-primary-danger-hover-border-color);
    color: var(--button-primary-danger-active-text-color)
}

.button--danger:hover {
    background-color: var(--button-primary-danger-hover-background-color);
    border-color: var(--button-primary-danger-hover-border-color);
    color: var(--button-primary-danger-hover-text-color)
}

.button--danger:active {
    background-color: var(--button-primary-danger-active-background-color);
    border-color: var(--button-primary-danger-active-border-color);
    color: var(--button-primary-danger-active-text-color)
}

.button--danger:disabled {
    background-color: var(--button-primary-danger-disabled-background-color);
    color: var(--button-primary-danger-disabled-text-color)
}

.button--secondary-danger {
    background-color: var(--button-secondary-danger-background-color);
    border-color: var(--button-secondary-danger-border-color);
    color: var(--button-secondary-danger-text-color)
}

.button--secondary-danger:focus {
    background-color: var(--button-secondary-danger-active-background-color);
    border-color: var(--button-secondary-danger-hover-border-color);
    color: var(--button-secondary-danger-active-text-color)
}

.button--secondary-danger:hover {
    background-color: var(--button-secondary-danger-hover-background-color);
    border-color: var(--button-secondary-danger-hover-border-color);
    color: var(--button-secondary-danger-hover-text-color)
}

.button--secondary-danger:active {
    background-color: var(--button-secondary-danger-active-background-color);
    border-color: var(--button-secondary-danger-active-border-color);
    color: var(--button-secondary-danger-active-text-color)
}

.button--secondary-danger:disabled {
    background-color: var(--button-secondary-danger-disabled-background-color);
    color: var(--button-secondary-danger-disabled-text-color);
    border-color: var(--button-secondary-danger-disabled-border-color)
}

.button__icon {
    pointer-events: none;
    transition: transform .2s ease-out;
    font-size: inherit;
    display: inline-block;
    vertical-align: top
}

.button__icon::before {
    pointer-events: none;
    transition: transform .2s ease-out;
    font-size: var(--font-size-s);
    display: inline-block;
    vertical-align: top
}

.button__icon .button--small {
    width: var(--size-s);
    font-size: var(--font-size)
}

.button__icon-right::before {
    order: 1;
    margin: var(--size-5xs) var(--size-5xs) var(--size-5xs) var(--size-2xs)
}

.button--no-margin {
    margin: var(--size-5xs)
}