.lightButton-Mym3My5x { align-items: center; background-color: var(--ui-lib-light-button-color-bg, var(--ui-lib-light-button-default-color-bg)); border-color: var(--ui-lib-light-button-color-border, var(--ui-lib-light-button-default-color-border)); border-style: solid; border-width: 1px; box-sizing: border-box; color: var(--ui-lib-light-button-color-content, var(--ui-lib-light-button-default-color-content)); cursor: default; display: inline-flex; justify-content: center; max-width: 100%; min-width: 40px; outline: none; overflow: visible; position: relative } .lightButton-Mym3My5x:focus { outline: none } .lightButton-Mym3My5x:focus-visible { outline: none } .lightButton-Mym3My5x:after { border-style: solid; border-width: 2px; box-sizing: border-box; content: ""; display: none; height: calc(100% + 10px); inset-inline-start: -5px; pointer-events: none; position: absolute; top: -5px; width: calc(100% + 10px); z-index: 1 } .lightButton-Mym3My5x:focus:after { display: block } .lightButton-Mym3My5x:focus-visible:after { display: block } .lightButton-Mym3My5x:focus:not(:focus-visible):after { display: none } .lightButton-Mym3My5x:after { border-color: var(--color-focus-outline-color-blue) } .lightButton-Mym3My5x.link-Mym3My5x { cursor: pointer; -webkit-user-select: none; user-select: none } .lightButton-Mym3My5x.ltr-Mym3My5x { direction: ltr } .lightButton-Mym3My5x.rtl-Mym3My5x { direction: rtl } .lightButton-Mym3My5x.typography-regular16px-Mym3My5x { font-feature-settings: "tnum" on, "lnum" on; font-size: var(--ui-lib-typography-font-size); font-style: normal; font-weight: 400 } .lightButton-Mym3My5x.typography-medium16px-Mym3My5x, .lightButton-Mym3My5x.typography-regular16px-Mym3My5x { font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif; --ui-lib-typography-font-size: 16px; --ui-lib-typography-line-height: 24px; line-height: var(--ui-lib-typography-line-height) } .lightButton-Mym3My5x.typography-medium16px-Mym3My5x { font-feature-settings: "tnum" on, "lnum" on; font-size: var(--ui-lib-typography-font-size); font-style: normal; font-weight: 500 } .lightButton-Mym3My5x.typography-regular14px-Mym3My5x { font-feature-settings: "tnum" on, "lnum" on; font-size: var(--ui-lib-typography-font-size); font-style: normal; font-weight: 400 } .lightButton-Mym3My5x.typography-regular14px-Mym3My5x, .lightButton-Mym3My5x.typography-semibold14px-Mym3My5x { font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif; --ui-lib-typography-font-size: 14px; --ui-lib-typography-line-height: 18px; line-height: var(--ui-lib-typography-line-height) } .lightButton-Mym3My5x.typography-semibold14px-Mym3My5x { font-feature-settings: "tnum" on, "lnum" on; font-size: var(--ui-lib-typography-font-size); font-style: normal; font-weight: 600 } .lightButton-Mym3My5x.typography-semibold16px-Mym3My5x { font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif; font-feature-settings: "tnum" on, "lnum" on; font-style: normal; --ui-lib-typography-font-size: 16px; font-size: var(--ui-lib-typography-font-size); font-weight: 600; --ui-lib-typography-line-height: 24px; line-height: var(--ui-lib-typography-line-height) } .content-Mym3My5x { display: inline-block; min-width: 0; text-align: center; --ui-lib-lightbutton-show-children-with-fallback: var(--ui-lib-lightButton-show-children, 1); max-width: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * 9999px + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px) } .visuallyHidden-Mym3My5x { display: block; font-weight: 600; height: 0; overflow: hidden; visibility: hidden } .nowrap-Mym3My5x { align-self: auto; overflow: hidden; white-space: nowrap } .ellipsisContainer-Mym3My5x { display: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .textWrapContainer-Mym3My5x { max-height: calc(var(--ui-lib-light-button-content-max-lines)*var(--ui-lib-typography-line-height)); overflow: hidden; word-wrap: break-word; text-align: start; word-break: break-word } .textWrapWithEllipsis-Mym3My5x { display: -webkit-box; overflow: hidden; -webkit-line-clamp: var(--ui-lib-light-button-content-max-lines); -webkit-box-orient: vertical; line-height: var(--ui-lib-typography-line-height); max-height: calc(var(--ui-lib-typography-line-height)*var(--ui-lib-light-button-content-max-lines)) } .slot-Mym3My5x { align-items: center; display: flex; justify-content: center } .caret-Mym3My5x, .slot-Mym3My5x>span[role=img] { display: inline-flex; flex-shrink: 0 } .caret-Mym3My5x { max-height: 28px; max-width: 28px; min-height: 18px; min-width: 18px } .activeCaret-Mym3My5x { transform: rotate(180deg) } .activeCaret-Mym3My5x:dir(rtl) { transform: rotate(-180deg) } .caret-Mym3My5x:not(:last-child), .content-Mym3My5x:not(:last-child), .slot-Mym3My5x:not(:last-child) { --ui-lib-lightbutton-show-children-with-fallback: var(--ui-lib-lightButton-show-children, 1); margin-inline-end: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * 4px + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px) } .xsmall-Mym3My5x { border-radius: 6px; height: 28px; min-width: 28px; --ui-lib-light-button-padding-inline-start-default: 11px; --ui-lib-light-button-padding-inline-end-default: 11px; --ui-lib-light-button-padding-block-start-default: 0; --ui-lib-light-button-padding-block-end-default: 0; --ui-lib-lightbutton-show-children-with-fallback: var(--ui-lib-lightButton-show-children, 1); padding-block-end: 0; padding-block-start: 0; padding-inline-end: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px); padding-inline-start: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px) } .xsmall-Mym3My5x:after { border-radius: 10px } .xsmall-Mym3My5x.withStartSlot-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 7px } .xsmall-Mym3My5x.withEndSlot-Mym3My5x { --ui-lib-light-button-padding-inline-end-default: 7px } .xsmall-Mym3My5x.noContent-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 4px; --ui-lib-light-button-padding-inline-end-default: 4px; padding-inline-end: max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 2px); padding-inline-start: max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 2px) } .xsmall-Mym3My5x.wrap-Mym3My5x { height: auto; min-height: 28px } .xsmall-Mym3My5x .content-Mym3My5x { padding-bottom: calc((28px - var(--ui-lib-typography-line-height))/2 - 1px); padding-top: calc((28px - var(--ui-lib-typography-line-height))/2 - 1px) } .small-Mym3My5x { border-radius: 6px; height: 34px; min-width: 34px; --ui-lib-light-button-padding-inline-start-default: 11px; --ui-lib-light-button-padding-inline-end-default: 11px; --ui-lib-light-button-padding-block-start-default: 0; --ui-lib-light-button-padding-block-end-default: 0; --ui-lib-lightbutton-show-children-with-fallback: var(--ui-lib-lightButton-show-children, 1); padding-block-end: 0; padding-block-start: 0; padding-inline-end: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px); padding-inline-start: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px) } .small-Mym3My5x:after { border-radius: 10px } .small-Mym3My5x.withStartSlot-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 7px } .small-Mym3My5x.withEndSlot-Mym3My5x { --ui-lib-light-button-padding-inline-end-default: 7px } .small-Mym3My5x.noContent-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 2px; --ui-lib-light-button-padding-inline-end-default: 2px; padding-inline-end: max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 2px); padding-inline-start: max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 2px) } .small-Mym3My5x.wrap-Mym3My5x { height: auto; min-height: 34px } .small-Mym3My5x .content-Mym3My5x { padding-bottom: calc((34px - var(--ui-lib-typography-line-height))/2 - 1px); padding-top: calc((34px - var(--ui-lib-typography-line-height))/2 - 1px) } .medium-Mym3My5x { border-radius: 8px; height: 40px; min-width: 40px; --ui-lib-light-button-padding-inline-start-default: 15px; --ui-lib-light-button-padding-inline-end-default: 15px; --ui-lib-light-button-padding-block-start-default: 0; --ui-lib-light-button-padding-block-end-default: 0; --ui-lib-lightbutton-show-children-with-fallback: var(--ui-lib-lightButton-show-children, 1); padding-block-end: 0; padding-block-start: 0; padding-inline-end: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px); padding-inline-start: calc(max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 1) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 1)) * max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 3px) + max(0, 1 - (var(--ui-lib-lightbutton-show-children-with-fallback) - 0) * (var(--ui-lib-lightbutton-show-children-with-fallback) - 0)) * 0px) } .medium-Mym3My5x:after { border-radius: 12px } .medium-Mym3My5x.withStartSlot-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 11px } .medium-Mym3My5x.withEndSlot-Mym3My5x { --ui-lib-light-button-padding-inline-end-default: 11px } .medium-Mym3My5x.noContent-Mym3My5x { --ui-lib-light-button-padding-inline-start-default: 5px; --ui-lib-light-button-padding-inline-end-default: 5px; padding-inline-end: max(var(--ui-lib-light-button-padding-inline-end, var(--ui-lib-light-button-padding-inline-end-default)), 2px); padding-inline-start: max(var(--ui-lib-light-button-padding-inline-start, var(--ui-lib-light-button-padding-inline-start-default)), 2px) } .medium-Mym3My5x.wrap-Mym3My5x { height: auto; min-height: 40px } .medium-Mym3My5x .content-Mym3My5x { padding-bottom: calc((40px - var(--ui-lib-typography-line-height))/2 - 1px); padding-top: calc((40px - var(--ui-lib-typography-line-height))/2 - 1px) } .pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-neutral-extra-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-extra-bold); --ui-lib-light-button-default-color-content: var(--color-content-primary-inverse) } @media (any-hover:hover) { .pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO:hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-neutral-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-bold); --ui-lib-light-button-default-color-content: var(--color-content-primary-inverse) } } .pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO.pills-copAMuqO:active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-neutral-extra-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-extra-bold); --ui-lib-light-button-default-color-content: var(--color-content-primary-inverse) } .primary-copAMuqO.gray-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-primary-neutral-default); --ui-lib-light-button-default-color-content: var(--color-button-content-primary-neutral-default); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-primary-neutral-default) } @media not (pointer:coarse) { @media (any-hover: hover) { .primary-copAMuqO.gray-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-button-fill_border-primary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-primary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-primary-neutral-hover) } } } .primary-copAMuqO.gray-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-primary-neutral-is-selected); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-primary-neutral-is-selected); --ui-lib-light-button-default-color-content: var(--color-button-content-primary-neutral-hover) } @media (any-hover:hover) { .primary-copAMuqO.gray-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-primary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-primary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-primary-neutral-hover) } } @media not (pointer:coarse) { .primary-copAMuqO.gray-copAMuqO.active-copAMuqO, .primary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .primary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-primary-neutral-active); --ui-lib-light-button-default-color-content: var(--color-button-content-primary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-primary-neutral-active) } .primary-copAMuqO.gray-copAMuqO.active-copAMuqO.grouped-copAMuqO, .primary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .primary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .primary-copAMuqO.gray-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .primary-copAMuqO.gray-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-disabled); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-disabled); transform: translateY(0) } .quiet-primary-copAMuqO.gray-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-quiet-primary-neutral-default); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .quiet-primary-copAMuqO.gray-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-button-fill_border-quiet-primary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-quiet-primary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-quiet-primary-neutral-hover) } } } .quiet-primary-copAMuqO.gray-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-quiet-primary-neutral-is-selected); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-quiet-primary-neutral-is-selected); --ui-lib-light-button-default-color-content: var(--color-button-content-quiet-primary-neutral-active) } @media (any-hover:hover) { .quiet-primary-copAMuqO.gray-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-quiet-primary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-quiet-primary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-quiet-primary-neutral-hover) } } @media not (pointer:coarse) { .quiet-primary-copAMuqO.gray-copAMuqO.active-copAMuqO, .quiet-primary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .quiet-primary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-quiet-primary-neutral-active); --ui-lib-light-button-default-color-content: var(--color-button-content-quiet-primary-neutral-active); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-quiet-primary-neutral-active) } .quiet-primary-copAMuqO.gray-copAMuqO.active-copAMuqO.grouped-copAMuqO, .quiet-primary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .quiet-primary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .quiet-primary-copAMuqO.gray-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .quiet-primary-copAMuqO.gray-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-disabled); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-disabled); transform: translateY(0) } .quiet-primary-copAMuqO.green-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-content-primary-success); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .quiet-primary-copAMuqO.green-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } } .quiet-primary-copAMuqO.green-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-success) } @media (any-hover:hover) { .quiet-primary-copAMuqO.green-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } @media not (pointer:coarse) { .quiet-primary-copAMuqO.green-copAMuqO.active-copAMuqO, .quiet-primary-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .quiet-primary-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-success-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-light) } .quiet-primary-copAMuqO.green-copAMuqO.active-copAMuqO.grouped-copAMuqO, .quiet-primary-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .quiet-primary-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .quiet-primary-copAMuqO.green-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .quiet-primary-copAMuqO.green-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-background-disabled); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-disabled); transform: translateY(0) } .quiet-primary-copAMuqO.red-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-content-primary-danger); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .quiet-primary-copAMuqO.red-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } } .quiet-primary-copAMuqO.red-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-danger) } @media (any-hover:hover) { .quiet-primary-copAMuqO.red-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } @media not (pointer:coarse) { .quiet-primary-copAMuqO.red-copAMuqO.active-copAMuqO, .quiet-primary-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .quiet-primary-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-danger-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-light) } .quiet-primary-copAMuqO.red-copAMuqO.active-copAMuqO.grouped-copAMuqO, .quiet-primary-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .quiet-primary-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .quiet-primary-copAMuqO.red-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .quiet-primary-copAMuqO.red-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-disabled); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-disabled); transform: translateY(0) } .quiet-primary-copAMuqO.blue-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .quiet-primary-copAMuqO.blue-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } } .quiet-primary-copAMuqO.blue-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent) } @media (any-hover:hover) { .quiet-primary-copAMuqO.blue-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } @media not (pointer:coarse) { .quiet-primary-copAMuqO.blue-copAMuqO.active-copAMuqO, .quiet-primary-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .quiet-primary-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-extra-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-light) } .quiet-primary-copAMuqO.blue-copAMuqO.active-copAMuqO.grouped-copAMuqO, .quiet-primary-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .quiet-primary-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .quiet-primary-copAMuqO.blue-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .quiet-primary-copAMuqO.blue-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-disabled); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-disabled); transform: translateY(0) } .secondary-copAMuqO.gray-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-neutral-default); --ui-lib-light-button-default-color-border: var(--color-border-primary-neutral-light) } @media not (pointer:coarse) { @media (any-hover: hover) { .secondary-copAMuqO.gray-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-button-fill_border-secondary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-extra-light) } } } .secondary-copAMuqO.gray-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-secondary-neutral-is-selected); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-extra-light); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-neutral-is-selected) } @media (any-hover:hover) { .secondary-copAMuqO.gray-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-secondary-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-neutral-hover); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-extra-light) } } @media not (pointer:coarse) { .secondary-copAMuqO.gray-copAMuqO.active-copAMuqO, .secondary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .secondary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-secondary-neutral-active); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-neutral-active); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-neutral-light) } .secondary-copAMuqO.gray-copAMuqO.active-copAMuqO.grouped-copAMuqO, .secondary-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .secondary-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .secondary-copAMuqO.gray-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .secondary-copAMuqO.gray-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-border-primary-neutral-light); transform: translateY(0) } .secondary-copAMuqO.green-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-success-default); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-light) } @media not (pointer:coarse) { @media (any-hover: hover) { .secondary-copAMuqO.green-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } } .secondary-copAMuqO.green-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-success) } @media (any-hover:hover) { .secondary-copAMuqO.green-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } @media not (pointer:coarse) { .secondary-copAMuqO.green-copAMuqO.active-copAMuqO, .secondary-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .secondary-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-success-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-light) } .secondary-copAMuqO.green-copAMuqO.active-copAMuqO.grouped-copAMuqO, .secondary-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .secondary-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .secondary-copAMuqO.green-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .secondary-copAMuqO.green-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-border-primary-neutral-light); transform: translateY(0) } .secondary-copAMuqO.red-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-danger-default); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-light) } @media not (pointer:coarse) { @media (any-hover: hover) { .secondary-copAMuqO.red-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } } .secondary-copAMuqO.red-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-danger) } @media (any-hover:hover) { .secondary-copAMuqO.red-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } @media not (pointer:coarse) { .secondary-copAMuqO.red-copAMuqO.active-copAMuqO, .secondary-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .secondary-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-light); --ui-lib-light-button-default-color-content: var(--color-container-fill-secondary-danger-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-light) } .secondary-copAMuqO.red-copAMuqO.active-copAMuqO.grouped-copAMuqO, .secondary-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .secondary-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .secondary-copAMuqO.red-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .secondary-copAMuqO.red-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-border-primary-neutral-light); transform: translateY(0) } .secondary-copAMuqO.blue-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-accent-default); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-light) } @media not (pointer:coarse) { @media (any-hover: hover) { .secondary-copAMuqO.blue-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } } .secondary-copAMuqO.blue-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent) } @media (any-hover:hover) { .secondary-copAMuqO.blue-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } @media not (pointer:coarse) { .secondary-copAMuqO.blue-copAMuqO.active-copAMuqO, .secondary-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .secondary-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-extra-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-light) } .secondary-copAMuqO.blue-copAMuqO.active-copAMuqO.grouped-copAMuqO, .secondary-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .secondary-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .secondary-copAMuqO.blue-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .secondary-copAMuqO.blue-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-border-primary-neutral-light); transform: translateY(0) } .ghost-copAMuqO.gray-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-neutral-bold-default); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .ghost-copAMuqO.gray-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-button-fill_border-ghost-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-neutral-bold-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-ghost-neutral-hover) } } } .ghost-copAMuqO.gray-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-border: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-neutral-is-selected) } @media (any-hover:hover) { .ghost-copAMuqO.gray-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-ghost-neutral-hover); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-neutral-bold-hover); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-ghost-neutral-hover) } } @media not (pointer:coarse) { .ghost-copAMuqO.gray-copAMuqO.active-copAMuqO, .ghost-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .ghost-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-button-fill_border-ghost-neutral-active); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-neutral-active); --ui-lib-light-button-default-color-border: var(--color-button-fill_border-ghost-neutral-active) } .ghost-copAMuqO.gray-copAMuqO.active-copAMuqO.grouped-copAMuqO, .ghost-copAMuqO.gray-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .ghost-copAMuqO.gray-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .ghost-copAMuqO.gray-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .ghost-copAMuqO.gray-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-content-primary-neutral-light); --ui-lib-light-button-default-color-border: var(--color-static-transparent); transform: translateY(0) } .ghost-copAMuqO.green-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-success-default); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .ghost-copAMuqO.green-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } } .ghost-copAMuqO.green-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-border: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-success-default) } @media (any-hover:hover) { .ghost-copAMuqO.green-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-positive); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-extra-light) } } @media not (pointer:coarse) { .ghost-copAMuqO.green-copAMuqO.active-copAMuqO, .ghost-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .ghost-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-success-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-success-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-success-light) } .ghost-copAMuqO.green-copAMuqO.active-copAMuqO.grouped-copAMuqO, .ghost-copAMuqO.green-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .ghost-copAMuqO.green-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .ghost-copAMuqO.green-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .ghost-copAMuqO.green-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-static-transparent); transform: translateY(0) } .ghost-copAMuqO.red-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-danger-default); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .ghost-copAMuqO.red-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } } .ghost-copAMuqO.red-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-border: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-danger-default) } @media (any-hover:hover) { .ghost-copAMuqO.red-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-negative); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-extra-light) } } @media not (pointer:coarse) { .ghost-copAMuqO.red-copAMuqO.active-copAMuqO, .ghost-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .ghost-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-danger-light); --ui-lib-light-button-default-color-content: var(--color-container-fill-secondary-danger-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-danger-light) } .ghost-copAMuqO.red-copAMuqO.active-copAMuqO.grouped-copAMuqO, .ghost-copAMuqO.red-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .ghost-copAMuqO.red-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .ghost-copAMuqO.red-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .ghost-copAMuqO.red-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-static-transparent); transform: translateY(0) } .ghost-copAMuqO.blue-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-ghost-accent-default); --ui-lib-light-button-default-color-border: var(--color-static-transparent) } @media not (pointer:coarse) { @media (any-hover: hover) { .ghost-copAMuqO.blue-copAMuqO:hover { --ui-lib-light-button-default-color-bg:var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } } .ghost-copAMuqO.blue-copAMuqO.selected-copAMuqO { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-border: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-secondary-accent-default) } @media (any-hover:hover) { .ghost-copAMuqO.blue-copAMuqO.selected-copAMuqO:not(.grouped-copAMuqO):not(:disabled):hover { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-extra-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-semi-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-extra-light) } } @media not (pointer:coarse) { .ghost-copAMuqO.blue-copAMuqO.active-copAMuqO, .ghost-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active, .ghost-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active { --ui-lib-light-button-default-color-bg: var(--color-container-fill-primary-accent-light); --ui-lib-light-button-default-color-content: var(--color-content-primary-accent-extra-bold); --ui-lib-light-button-default-color-border: var(--color-container-fill-primary-accent-light) } .ghost-copAMuqO.blue-copAMuqO.active-copAMuqO.grouped-copAMuqO, .ghost-copAMuqO.blue-copAMuqO.disableActiveOnTouch-copAMuqO:not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO, .ghost-copAMuqO.blue-copAMuqO:not(.disableActiveOnTouch-copAMuqO):not(.disableActiveStateStyles-copAMuqO):not(:disabled):active.grouped-copAMuqO { transform: none } } @media (any-hover:hover) { .ghost-copAMuqO.blue-copAMuqO.withGrouped-copAMuqO.quiet-primary-copAMuqO:not(.selected-copAMuqO):not(:hover):not(:disabled) { --ui-lib-light-button-default-color-bg: #0000; --ui-lib-light-button-default-color-border: #0000 } } .ghost-copAMuqO.blue-copAMuqO:disabled { --ui-lib-light-button-default-color-bg: var(--color-static-transparent); --ui-lib-light-button-default-color-content: var(--color-button-content-disabled); --ui-lib-light-button-default-color-border: var(--color-static-transparent); transform: translateY(0) }