.cdx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 32px;
    max-width: 28rem;
    font-family: inherit;
    font-size: var(--font-size-medium, 1rem);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none
}

[dir] .cdx-button {
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    padding-right: 11px;
    padding-left: 11px;
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: .1s
}

.cdx-button--size-small {
    gap: 4px;
    min-height: 1.5rem
}

[dir] .cdx-button--size-small {
    padding-right: 5px;
    padding-left: 5px
}

.cdx-button--size-large {
    min-height: 44px
}

[dir] .cdx-button--size-large {
    padding-right: 15px;
    padding-left: 15px
}

.cdx-button--icon-only {
    min-width: 32px
}

[dir] .cdx-button--icon-only {
    padding-right: 0;
    padding-left: 0
}

.cdx-button--icon-only.cdx-button--size-small {
    min-width: 1.5rem
}

.cdx-button--icon-only.cdx-button--size-large {
    min-width: 44px
}

[dir] .cdx-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.cdx-button .cdx-button__icon,
.cdx-button .cdx-icon {
    vertical-align: middle
}

.cdx-button .cdx-icon {
    color: inherit
}

.cdx-button--fake-button,
.cdx-button--fake-button:hover,
.cdx-button--fake-button:focus {
    text-decoration: none
}

.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
    color: var(--color-base, #202122)
}

[dir] .cdx-button:enabled,
[dir] .cdx-button.cdx-button--fake-button--enabled {
    background-color: var(--background-color-interactive-subtle, #f8f9fa);
    border-color: var(--border-color-interactive, #72777d)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled .cdx-button__icon {
        background-color: var(--color-base, #202122)
    }
}

[dir] .cdx-button:enabled:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled:hover {
    background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
    border-color: var(--border-color-interactive--hover, #27292d);
    cursor: pointer
}

[dir] .cdx-button:enabled:active,
[dir] .cdx-button.cdx-button--fake-button--enabled:active,
[dir] .cdx-button:enabled.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--is-active {
    background-color: var(--background-color-interactive-subtle--active, #dadde3);
    border-color: var(--border-color-interactive--active, #202122)
}

.cdx-button:enabled:focus,
.cdx-button.cdx-button--fake-button--enabled:focus {
    outline: 1px solid transparent
}

[dir] .cdx-button:enabled:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-progressive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c)
}

.cdx-button:enabled.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive {
    color: var(--color-progressive, #36c)
}

[dir] .cdx-button:enabled.cdx-button--action-progressive,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive {
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    border-color: var(--border-color-progressive, #6485d1)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-progressive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive .cdx-button__icon {
        background-color: var(--color-progressive, #36c)
    }
}

.cdx-button:enabled.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover {
    color: var(--color-progressive--hover, #3056a9)
}

[dir] .cdx-button:enabled.cdx-button--action-progressive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover {
    background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
    border-color: var(--border-color-progressive--hover, #3056a9)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-progressive:hover .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover .cdx-button__icon {
        background-color: var(--color-progressive--hover, #3056a9)
    }
}

.cdx-button:enabled.cdx-button--action-progressive:active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:active,
.cdx-button:enabled.cdx-button--action-progressive.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive.cdx-button--is-active {
    color: var(--color-progressive--active, #233566)
}

[dir] .cdx-button:enabled.cdx-button--action-progressive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:active,
[dir] .cdx-button:enabled.cdx-button--action-progressive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive.cdx-button--is-active {
    background-color: var(--background-color-progressive-subtle--active, #b6d4fb);
    border-color: var(--border-color-progressive--active, #233566)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-progressive:active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:active .cdx-button__icon,
    [dir] .cdx-button:enabled.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon {
        background-color: var(--color-progressive--active, #233566)
    }
}

.cdx-button:enabled.cdx-button--action-destructive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive {
    color: var(--color-destructive, #bf3c2c)
}

[dir] .cdx-button:enabled.cdx-button--action-destructive,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive {
    background-color: var(--background-color-destructive-subtle, #ffe9e5);
    border-color: var(--border-color-destructive, #f54739)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-destructive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive .cdx-button__icon {
        background-color: var(--color-destructive, #bf3c2c)
    }
}

.cdx-button:enabled.cdx-button--action-destructive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:hover {
    color: var(--color-destructive--hover, #9f3526)
}

[dir] .cdx-button:enabled.cdx-button--action-destructive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:hover {
    background-color: var(--background-color-destructive-subtle--hover, #ffdad3);
    border-color: var(--border-color-destructive--hover, #9f3526)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-destructive:hover .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:hover .cdx-button__icon {
        background-color: var(--color-destructive--hover, #9f3526)
    }
}

.cdx-button:enabled.cdx-button--action-destructive:active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:active,
.cdx-button:enabled.cdx-button--action-destructive.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive.cdx-button--is-active {
    color: var(--color-destructive--active, #612419)
}

[dir] .cdx-button:enabled.cdx-button--action-destructive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:active,
[dir] .cdx-button:enabled.cdx-button--action-destructive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive.cdx-button--is-active {
    background-color: var(--background-color-destructive-subtle--active, #ffc8bd);
    border-color: var(--border-color-destructive--active, #612419)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--action-destructive:active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:active .cdx-button__icon,
    [dir] .cdx-button:enabled.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon {
        background-color: var(--color-destructive--active, #612419)
    }
}

[dir] .cdx-button:enabled.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-destructive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-destructive--focus, #36c)
}

.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive {
    color: var(--color-inverted-fixed, #fff)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive {
    background-color: var(--background-color-progressive, #36c);
    border-color: var(--border-color-transparent, transparent)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover {
    background-color: var(--background-color-progressive--hover, #3056a9)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:active,
[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive.cdx-button--is-active {
    background-color: var(--background-color-progressive--active, #233566)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-progressive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c), inset 0 0 0 2px var(--box-shadow-color-inverted, #fff)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive .cdx-button__icon {
        background-color: var(--color-inverted-fixed, #fff)
    }
}

.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive {
    color: var(--color-inverted-fixed, #fff)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive {
    background-color: var(--background-color-destructive, #bf3c2c);
    border-color: var(--border-color-transparent, transparent)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:hover {
    background-color: var(--background-color-destructive--hover, #9f3526)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:active,
[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive.cdx-button--is-active {
    background-color: var(--background-color-destructive--active, #612419)
}

[dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-destructive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-destructive--focus, #36c), inset 0 0 0 2px var(--box-shadow-color-inverted, #fff)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-destructive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-destructive .cdx-button__icon {
        background-color: var(--color-inverted-fixed, #fff)
    }
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet {
    background-color: var(--background-color-transparent, transparent);
    border-color: var(--border-color-transparent, transparent)
}

.cdx-button:enabled.cdx-button--weight-quiet:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
    mix-blend-mode: var(--mix-blend-mode-blend, multiply)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
    background-color: var(--background-color-interactive-subtle--hover, #eaecf0)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:active,
[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--is-active {
    background-color: var(--background-color-interactive-subtle--active, #dadde3)
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive {
    color: var(--color-progressive, #36c)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive .cdx-button__icon {
        background-color: var(--color-progressive, #36c)
    }
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover {
    color: var(--color-progressive--hover, #3056a9)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover {
    background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
    border-color: var(--border-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:hover .cdx-button__icon {
        background-color: var(--color-progressive--hover, #3056a9)
    }
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active {
    color: var(--color-progressive--active, #233566)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active,
[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active {
    background-color: var(--background-color-progressive-subtle--active, #b6d4fb);
    border-color: var(--border-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:active .cdx-button__icon,
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive.cdx-button--is-active .cdx-button__icon {
        background-color: var(--color-progressive--active, #233566)
    }
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-progressive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c)
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive {
    color: var(--color-destructive, #bf3c2c)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive .cdx-button__icon {
        background-color: var(--color-destructive, #bf3c2c)
    }
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover {
    color: var(--color-destructive--hover, #9f3526)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover {
    background-color: var(--background-color-destructive-subtle--hover, #ffdad3);
    border-color: var(--border-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:hover .cdx-button__icon {
        background-color: var(--color-destructive--hover, #9f3526)
    }
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active {
    color: var(--color-destructive--active, #612419)
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active,
[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active,
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active {
    background-color: var(--background-color-destructive-subtle--active, #ffc8bd);
    border-color: var(--border-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:active .cdx-button__icon,
    [dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive.cdx-button--is-active .cdx-button__icon {
        background-color: var(--color-destructive--active, #612419)
    }
}

[dir] .cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active),
[dir] .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-destructive:focus:not(:active):not(.cdx-button--is-active) {
    border-color: var(--border-color-destructive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-destructive--focus, #36c)
}

.cdx-button:disabled,
.cdx-button.cdx-button--fake-button--disabled {
    color: var(--color-disabled-emphasized, #a2a9b1)
}

[dir] .cdx-button:disabled,
[dir] .cdx-button.cdx-button--fake-button--disabled {
    background-color: var(--background-color-disabled, #dadde3);
    border-color: var(--border-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:disabled .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--disabled .cdx-button__icon {
        background-color: var(--color-inverted, #fff)
    }
}

.cdx-button:disabled.cdx-button--weight-quiet,
.cdx-button.cdx-button--fake-button--disabled.cdx-button--weight-quiet {
    color: var(--color-disabled, #a2a9b1)
}

[dir] .cdx-button:disabled.cdx-button--weight-quiet,
[dir] .cdx-button.cdx-button--fake-button--disabled.cdx-button--weight-quiet {
    background-color: var(--background-color-transparent, transparent)
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    [dir] .cdx-button:disabled.cdx-button--weight-quiet .cdx-button__icon,
    [dir] .cdx-button.cdx-button--fake-button--disabled.cdx-button--weight-quiet .cdx-button__icon {
        background-color: var(--color-disabled, #a2a9b1)
    }
}