.tbk-button:focus {
    outline: none;
}

.tbk-button {
    display: inline-flex;
    text-decoration: none;
}

.tbk-button[aria-disabled] {
    pointer-events: none;
}

.tbk-button {
    font-size: var(--sd-ec-text-heading-medium-fontsize);
    font-style: normal;
    font-family: var(--sd-ec-font-font-family-regular);
    font-weight: var(--sd-ec-text-heading-medium-fontweight);
    line-height: var(--sd-ec-text-heading-medium-lineheight);
    letter-spacing: var(--sd-ec-text-heading-medium-letterspacing);
    min-height: var(--sd-dimension-base-xx-large);
    padding: var(--sd-spacing-base-small) var(--sd-spacing-base-xx-large);
    border-style: none;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tbk-button .button-icon img {
    height: var(--sd-dimension-base-x-large);
}

.tbk-button.full-width {
    width: 100%;
}

.tbk-button:not(:disabled):not(.loading) {
    cursor: pointer;
}

.tbk-button .button-icon img {
    pointer-events: none;
    height: var(--sd-dimension-base-large);
}

.tbk-button .button-icon {
    margin-right: var(--sd-spacing-base-small);
}

.tbk-button:focus-visible {
    box-shadow: 0 0 0 var(--sd-border-base-size-xx-small) var(--sd-color-base-blue-145), 0 0 0 var(--sd-boxshadow-base-size-x-small) var(--sd-ec-color-state-secondary-120), 0 0 0 var(--sd-boxshadow-base-size-small) var(--sd-color-base-blue-145);
}

.tbk-button:focus, .tbk-button:hover, .tbk-button:active {
    transition-timing-function: ease-out;
    transition-duration: 50ms;
    transition-property: all;
}

.tbk-button.icon-only {
    width: auto;
    border-radius: 100%;
    padding: var(--sd-spacing-base-small) 0.75rem;
}

.tbk-button.primary {
    color: var(--sd-ec-color-neutral-000);
    background: var(--sd-ec-color-brand-primary-100);
    font-size: var(--sd-ec-text-heading-x-large-fontsize);
    font-style: normal;
    line-height: 1.625rem;
    letter-spacing: 0.01375rem;
}

.tbk-button.primary .button-icon img {
    filter: var(--sd-ec-color-filter-on-background);
    height: var(--sd-dimension-base-x-large);
}

.tbk-button.primary:hover {
    background: var(--sd-ec-color-state-primary-120);
}

.tbk-button.primary:active {
    background: var(--sd-ec-color-state-primary-140);
}

.tbk-button.primary:disabled, .tbk-button.primary[aria-disabled] {
    background: var(--sd-ec-color-neutral-005);
    color: var(--sd-ec-color-neutral-060);
}

.tbk-button.primary:disabled .button-icon img, .tbk-button.primary[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-disabled-on-background);
}

.tbk-button.primary.inverted {
    color: var(--sd-ec-color-brand-secondary-100);
    background: var(--sd-ec-color-background-secondary-005);
    font-size: var(--sd-ec-text-heading-medium-fontsize);
    font-style: normal;
    line-height: var(--sd-ec-text-heading-medium-lineheight);
    letter-spacing: 0.01375rem;
}

.tbk-button.primary.inverted .button-icon img {
    filter: var(--sd-ec-color-filter-default);
}

.tbk-button.primary.inverted:hover {
    color: var(--sd-ec-color-state-secondary-120);
    background: var(--sd-ec-color-background-secondary-010);
}

.tbk-button.primary.inverted:active {
    color: var(--sd-ec-color-state-secondary-140);
    background: var(--sd-ec-color-background-secondary-020);
}

.tbk-button.primary.inverted:disabled, .tbk-button.primary.inverted[aria-disabled] {
    background: var(--sd-ec-color-state-tertiary-080);
    color: var(--sd-ec-color-brand-tertiary-100);
}

.tbk-button.primary.inverted:disabled .button-icon img, .tbk-button.primary.inverted[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-info);
}

.tbk-button.secondary {
    color: var(--sd-ec-color-neutral-000);
    background: var(--sd-ec-color-brand-secondary-100);
}

.tbk-button.secondary .button-icon img {
    filter: var(--sd-ec-color-filter-on-background);
}

.tbk-button.secondary:hover {
    background: var(--sd-ec-color-state-secondary-120);
}

.tbk-button.secondary:active {
    background: var(--sd-ec-color-state-secondary-140);
}

.tbk-button.secondary:disabled, .tbk-button.secondary[aria-disabled] {
    background: var(--sd-ec-color-neutral-005);
    color: var(--sd-ec-color-neutral-060);
}

.tbk-button.secondary:disabled .button-icon img, .tbk-button.secondary[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-disabled-on-background);
}

.tbk-button.secondary.inverted {
    color: var(--sd-ec-color-neutral-000);
    background: transparent;
    border: var(--sd-border-base-size-xx-small) solid var(--sd-ec-color-neutral-000);
}

.tbk-button.secondary.inverted:hover {
    background: var(--sd-ec-color-state-secondary-120);
}

.tbk-button.secondary.inverted:active {
    background: var(--sd-ec-color-state-secondary-140);
}

.tbk-button.secondary.inverted:disabled, .tbk-button.secondary.inverted[aria-disabled] {
    background: transparent;
    color: var(--sd-ec-color-state-tertiary-080);
    border: var(--sd-border-base-size-xx-small) solid var(--sd-ec-color-state-tertiary-080);
}

.tbk-button.secondary.inverted:disabled .button-icon img, .tbk-button.secondary.inverted[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-default);
}

.tbk-button.tertiary {
    color: var(--sd-ec-color-brand-secondary-100);
    background: transparent;
}

.tbk-button.tertiary .button-icon img {
    filter: var(--sd-ec-color-filter-default);
}

.tbk-button.tertiary:hover {
    color: var(--sd-ec-color-state-secondary-120);
}

.tbk-button.tertiary:active {
    color: var(--sd-ec-color-state-secondary-140);
}

.tbk-button.tertiary:disabled, .tbk-button.tertiary[aria-disabled] {
    background: var(--sd-ec-color-neutral-005);
    color: var(--sd-ec-color-neutral-060);
}

.tbk-button.tertiary:disabled .button-icon img, .tbk-button.tertiary[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-disabled-on-background);
}

.tbk-button.tertiary.inverted {
    color: var(--sd-ec-color-neutral-000);
    background: transparent;
}

.tbk-button.tertiary.inverted .button-icon img {
    filter: var(--sd-ec-color-filter-on-background);
}

.tbk-button.tertiary.inverted:hover {
    color: var(--sd-ec-color-background-secondary-020);
}

.tbk-button.tertiary.inverted:hover .button-icon img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(31%) saturate(4058%) hue-rotate(175deg) brightness(103%) contrast(87%);
}

.tbk-button.tertiary.inverted:active {
    color: var(--sd-ec-color-background-secondary-030);
}

.tbk-button.tertiary.inverted:active .button-icon img {
    filter: var(--sd-ec-color-filter-default);
}

.tbk-button.tertiary.inverted:disabled {
    color: var(--sd-ec-color-neutral-060);
}

.tbk-button.tertiary.inverted:disabled .button-icon img {
    filter: var(--sd-ec-color-filter-disabled-on-background);
}

.tbk-button.ghost {
    border: var(--sd-ec-border-width-medium) solid var(--sd-ec-color-brand-secondary-100);
    color: var(--sd-ec-color-brand-secondary-100);
    background-color: transparent;
}

.tbk-button.ghost .button-icon img {
    filter: var(--sd-ec-color-filter-default);
}

.tbk-button.ghost:hover {
    border: var(--sd-ec-border-width-medium) solid var(--sd-ec-color-state-secondary-120);
    color: var(--sd-ec-color-state-secondary-120);
    background: var(--sd-ec-color-background-secondary-010);
}

.tbk-button.ghost:active {
    border: var(--sd-ec-border-width-medium) solid var(--sd-ec-color-state-secondary-140);
    color: var(--sd-ec-color-state-secondary-140);
    background: var(--sd-ec-color-background-secondary-020);
}

.tbk-button.ghost:disabled, .tbk-button.ghost[aria-disabled] {
    border: var(--sd-ec-border-width-medium) solid var(--sd-ec-color-neutral-060);
    color: var(--sd-ec-color-neutral-060);
    background: transparent;
}

.tbk-button.ghost:disabled .button-icon img, .tbk-button.ghost[aria-disabled] .button-icon img {
    filter: var(--sd-ec-color-filter-disabled-on-background);
}

@media only screen and (min-width: 960px) {
    .tbk-button.primary.inverted,
    .tbk-button {
        font-size: var(--sd-ec-text-heading-x-large-fontsize);
        font-style: normal;
        line-height: 1.625rem;
        letter-spacing: 0.01375rem;
        padding: 0 var(--sd-spacing-base-xx-large);
    }

    .tbk-button.primary.inverted .button-icon img,
    .tbk-button .button-icon img {
        min-height: var(--sd-dimension-base-x-large);
    }

    .tbk-button.primary.inverted.icon-only,
    .tbk-button.icon-only {
        width: auto;
        border-radius: 100%;
        padding: var(--sd-spacing-base-small) var(--sd-spacing-base-small);
    }
}

.tbk-button.size--small {
    font-size: var(--sd-ec-text-heading-small-fontsize);
    line-height: var(--sd-ec-text-heading-x-small-lineheight);
}

.tbk-button.size--medium {
    font-size: var(--sd-ec-text-heading-medium-fontsize);
    line-height: var(--sd-ec-text-heading-medium-lineheight);
}

.tbk-button.size--large {
    font-size: var(--sd-ec-text-heading-x-large-fontsize);
    line-height: var(--sd-ec-text-heading-x-large-lineheight);
}