-maui-color-interaction-buttonsecondary-inverted); color: var(--maui-color-text-copy-inverted); background-color: transparent; } .sn.chip:not([dismissable]):not([disabled]) { border-color: var(--maui-color-interaction-buttonsecondary); } .sn.chip:not([dismissable]):not([disabled]):hover { background-color: var(--maui-color-interaction-buttonsecondaryhover); border-color: var(--maui-color-interaction-buttonsecondaryhover); color: var(--maui-color-brand-light); } .sn.chip.inverted:not([dismissable]):not([disabled]):hover { background-color: var(--maui-color-interaction-interaction-invertedhover); border-color: var(--maui-color-interaction-interaction-invertedhover); color: var(--maui-color-interaction-buttonsecondaryhover); } .sn.chip[disabled]:not(.checked) { border-color: var(--maui-color-disabled-foreground); } .sn.chip[disabled].inverted:not(.checked) { border-color: var(--maui-color-disabled-foreground-inverted); color: var(--maui-color-disabled-foreground-inverted); background-color: transparent; } .sn.chip[disabled].inverted.checked { background-color: var(--maui-color-disabled-background-inverted); color: var(--maui-color-disabled-foreground-inverted); border-width: 0; } .sn.chip:not(.checked):not([disabled]):hover { font-weight: var(--maui-font-weight-regular); } .sn.chip.checked:not([disabled]) { background-color: var(--maui-color-interaction-buttonsecondary); border-color: var(--maui-color-interaction-buttonsecondary); color: var(--maui-color-brand-light); } .sn.chip.checked.inverted:not([disabled]) { background-color: var(--maui-color-interaction-interaction-inverted); border-color: var(--maui-color-interaction-interaction-inverted); color: var(--maui-color-interaction-buttonsecondary); } .sn.chip.checked:not([disabled]):hover { background-color: var(--maui-color-interaction-buttonsecondaryhover); border-color: var(--maui-color-interaction-buttonsecondaryhover); } .sn.chip.inverted.checked:not([disabled]):hover { background-color: var(--maui-color-interaction-interaction-invertedhover); border-color: var(--maui-color-interaction-interaction-invertedhover); color: var(--maui-color-interaction-buttonsecondaryhover); } .sn.chip:not(.checked):not(:hover) span.label, .sn.chip:not(.checked):hover span.label { margin-top: -2px; } ï