mediawiki-skins-Citizen/skinStyles/codex/codex.styles.less

/*
 * Citizen
 *
 * SkinStyles for Codex
 * Module: @wikimedia/codex
 * Version: v0.1.1
 *
 * Date: 2022-12-01
*/

.cdx-icon {
	color: var( --color-base );
}

.cdx-button {
	font-weight: var( --font-weight-medium );
	border-radius: var( --border-radius--small );
}

.cdx-button:enabled {
	color: var( --color-emphasized );
}

.cdx-button:enabled:focus:not( :active ) {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-button--framed:enabled {
	background-color: var( --color-surface-2 );
	border-color: var( --border-color-base );
}

.cdx-button--framed:enabled:hover {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--hover );
	border-color: var( --border-color-base );
}

.cdx-button--framed:enabled:active {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--active );
	border-color: var( --border-color-base );
}

.cdx-button--framed:disabled {
	color: var( --color-subtle );
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

/*
 * T312987
 * --type is needed for 1.39 compatibility
 */
.cdx-button--type-primary.cdx-button--action-progressive:enabled,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled {
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:hover {
	background-color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:active {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-button--type-primary.cdx-button--action-progressive:enabled:focus:not( :active ),
.cdx-button--weight-primary.cdx-button--action-progressive:enabled:focus:not( :active ) {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled {
	background-color: var( --color-destructive );
	border-color: var( --color-destructive );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:hover {
	background-color: var( --color-destructive--hover );
	border-color: var( --color-destructive--hover );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:active {
	background-color: var( --color-destructive--active );
	border-color: var( --color-destructive--active );
}

.cdx-button--type-primary.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-primary.cdx-button--action-destructive:enabled:focus:not( :active ) {
	border-color: var( --color-destructive );
	box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px var( --color-inverted-fixed );
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled {
	color: var( --color-progressive );
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled:hover {
	color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.cdx-button--type-normal.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-normal.cdx-button--action-progressive:enabled:active {
	color: var( --color-progressive--active );
	background-color: var( --color-surface-2--active ); // Use normal style for now
	border-color: var( --color-progressive--active );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled {
	color: var( --color-destructive );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:hover {
	color: var( --color-destructive--hover );
	border-color: var( --color-destructive--hover );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:active {
	color: var( --color-destructive--active );
	background-color: var( --color-surface-2--active ); // Use normal style for now
	border-color: var( --color-destructive--active );
}

.cdx-button--type-normal.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-normal.cdx-button--action-destructive:enabled:focus:not( :active ) {
	border-color: var( --color-destructive );
	box-shadow: inset 0 0 0 1px var( --color-destructive );
}

.cdx-button--type-quiet:enabled:hover,
.cdx-button--weight-quiet:enabled:hover {
	background-color: var( --background-color-button-quiet--hover );
}

.cdx-button--type-quiet:enabled:active,
.cdx-button--weight-quiet:enabled:active {
	color: var( --color-emphasized );
	background-color: var( --background-color-button-quiet--active );
	border-color: var( --background-color-button-quiet--active );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled {
	color: var( --color-progressive );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled:hover {
	color: var( --color-progressive--hover );
	background-color: var( --background-color-progressive-subtle );
}

.cdx-button--type-quiet.cdx-button--action-progressive:enabled:active,
.cdx-button--weight-quiet.cdx-button--action-progressive:enabled:active {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled {
	color: var( --color-destructive );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:hover {
	color: var( --color-destructive--hover );
	background-color: var( --background-color-destructive-subtle );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:active,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:active {
	background-color: var( --color-destructive--active );
	border-color: var( --color-destructive--active );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:focus:not( :active ),
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:focus:not( :active ) {
	border-color: var( --color-destructive );
	box-shadow: inset 0 0 0 1px var( --color-destructive );
}

.cdx-button--type-quiet:disabled,
.cdx-button--weight-quiet:disabled {
	color: var( --color-subtle );
}

.cdx-button-group {
	border-radius: var( --border-radius--small );
}

.cdx-button-group .cdx-button:disabled {
	box-shadow: 0 -1px var( --color-subtle ), -1px 0 var( --color-subtle );
}

.cdx-thumbnail__placeholder,
.cdx-thumbnail__image {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius--small );
}

.cdx-thumbnail__placeholder {
	background-color: var( --color-surface-2 );
}

.cdx-thumbnail__placeholder__icon {
	color: var( --color-subtle );
}

.cdx-card {
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius--medium );
}

.cdx-card--is-link:hover {
	border-color: var( --color-progressive--hover );
}

.cdx-card--is-link:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}

.cdx-card__text {
	line-height: var( --line-height-sm );
}

.cdx-card__text__title {
	font-weight: var( --font-weight-semibold );
	line-height: var( --line-height-xs );
	color: var( --color-emphasized );
}

// Splitting description and supporting text into two colors
.cdx-card__text__description,
.cdx-card__text__description .cdx-icon {
	color: var( --color-base );
}

.cdx-card__text__supporting-text,
.cdx-card__text__supporting-text .cdx-icon {
	color: var( --color-subtle );
}

.cdx-checkbox__icon {
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
	border-radius: var( --border-radius--small );
}

.cdx-checkbox__input:enabled:hover + .cdx-checkbox__icon {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.cdx-checkbox__input:enabled:active + .cdx-checkbox__icon {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-checkbox__input:enabled:focus:not( :active ) + .cdx-checkbox__icon {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-checkbox__input:enabled:checked + .cdx-checkbox__icon,
.cdx-checkbox__input:enabled:indeterminate + .cdx-checkbox__icon {
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
}

.cdx-checkbox__input:enabled:checked:hover + .cdx-checkbox__icon,
.cdx-checkbox__input:enabled:indeterminate:hover + .cdx-checkbox__icon {
	background-color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.cdx-checkbox__input:enabled:checked:active + .cdx-checkbox__icon,
.cdx-checkbox__input:enabled:indeterminate:active + .cdx-checkbox__icon {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-checkbox__input:enabled:checked:focus:not( :active ):not( :hover ) + .cdx-checkbox__icon,
.cdx-checkbox__input:enabled:indeterminate:focus:not( :active ):not( :hover ) + .cdx-checkbox__icon {
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
}

.cdx-checkbox__input:enabled:checked:focus:not( :active ) + .cdx-checkbox__icon,
.cdx-checkbox__input:enabled:indeterminate:focus:not( :active ) + .cdx-checkbox__icon {
	box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}

.cdx-checkbox__input:disabled + .cdx-checkbox__icon {
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.cdx-checkbox__input:disabled ~ .cdx-checkbox__label-content {
	color: var( --color-subtle );
}

.cdx-search-result-title {
	font-weight: var( --font-weight-semibold );
}

.cdx-menu-item {
	line-height: var( --line-height );
}

.cdx-menu-item__content {
	line-height: var( --line-height-sm );
}

.cdx-menu-item--bold-label .cdx-menu-item__text__label {
	font-weight: var( --font-weight-semibold );
}

.cdx-menu-item--enabled,
.cdx-menu-item--enabled .cdx-menu-item__content {
	color: var( --color-emphasized );
}

.cdx-menu-item--enabled .cdx-menu-item__text__description {
	color: var( --color-subtle );
}

.cdx-menu-item--enabled:hover,
.cdx-menu-item--enabled.cdx-menu-item--highlighted {
	background-color: var( --background-color-button-quiet--hover );
}

.cdx-menu-item--enabled.cdx-menu-item--active,
.cdx-menu-item--enabled.cdx-menu-item--active:hover {
	color: var( --color-progressive );
	background-color: var( --background-color-progressive-subtle );
}

.cdx-menu-item--enabled.cdx-menu-item--active .cdx-menu-item__content,
.cdx-menu-item--enabled.cdx-menu-item--active:hover .cdx-menu-item__content,
.cdx-menu-item--enabled.cdx-menu-item--active .cdx-menu-item__text__description,
.cdx-menu-item--enabled.cdx-menu-item--active:hover .cdx-menu-item__text__description {
	color: var( --color-progressive );
}

.cdx-menu-item--enabled.cdx-menu-item--selected,
.cdx-menu-item--enabled.cdx-menu-item--selected:hover {
	background-color: var( --background-color-progressive-subtle );
}

.cdx-menu-item--enabled.cdx-menu-item--selected:hover,
.cdx-menu-item--enabled.cdx-menu-item--selected.cdx-menu-item--highlighted,
.cdx-menu-item--enabled.cdx-menu-item--selected:hover .cdx-menu-item__content,
.cdx-menu-item--enabled.cdx-menu-item--selected.cdx-menu-item--highlighted .cdx-menu-item__content,
.cdx-menu-item--enabled.cdx-menu-item--selected:hover .cdx-menu-item__text__description,
.cdx-menu-item--enabled.cdx-menu-item--selected.cdx-menu-item--highlighted .cdx-menu-item__text__description {
	color: var( --color-progressive );
}

.cdx-menu-item--disabled {
	color: var( --color-subtle );
}

.cdx-menu-item--disabled .cdx-menu-item__text__description {
	color: var( --color-subtle );
}

.cdx-progress-bar__bar {
	background-color: var( --color-progressive );
	// Fancy shadow
	// TODO: Need to figure out a way to deal with the overflow issue
	filter: drop-shadow( 0 0 16px var( --color-progressive ) );
}

.cdx-progress-bar--block {
	background-color: var( --color-surface-1 );
	border-color: var( --color-progressive );
}

.cdx-menu {
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-interactive );
	border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small );
	// box-shadow: var( --box-shadow-dialog );
}

.cdx-text-input__input:enabled {
	color: var( --color-emphasized );
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.cdx-text-input__input:enabled ~ .cdx-text-input__icon {
	color: var( --color-subtle );
}

.cdx-text-input__input:enabled:focus ~ .cdx-text-input__icon,
.cdx-text-input__input:enabled.cdx-text-input__input--has-value ~ .cdx-text-input__icon {
	color: var( --color-base );
}

.cdx-text-input__input:enabled:hover {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.cdx-text-input__input:enabled:focus {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-text-input__input:disabled {
	color: var( --color-subtle );
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
	-webkit-text-fill-color: var( --color-subtle );
}

.cdx-text-input__input:disabled ~ .cdx-text-input__icon {
	color: var( --color-subtle );
}

/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
.cdxinput__input::input-placeholder {
	color: var( --color-subtle );
}

.cdx-text-input__input::placeholder {
	color: var( --color-subtle );
}

.cdx-lookup--pending .cdx-text-input__input {
	background-color: var( --color-surface-2 );
	background-image: linear-gradient( 135deg, var( --color-surface-1 ) 25%, rgba( 255, 255, 255, 0 ) 25%, rgba( 255, 255, 255, 0 ) 50%, var( --color-surface-1 ) 50%, var( --color-surface-1 ) 75%, rgba( 255, 255, 255, 0 ) 75%, rgba( 255, 255, 255, 0 ) );
}

.cdx-message {
	color: var( --color-base );
}

.cdx-message--warning .cdx-message__icon {
	color: var( --color-warning );
}

.cdx-message--error .cdx-message__icon {
	color: var( --color-destructive );
}

.cdx-message--success .cdx-message__icon {
	color: var( --color-success );
}

.cdx-message--inline {
	font-weight: var( --font-weight-semibold );
}

.cdx-message--inline.cdx-message--error {
	color: var( --color-destructive );
}

.cdx-message--inline.cdx-message--success {
	color: var( --color-success );
}

.cdx-message--block.cdx-message--notice {
	background-color: var( --color-surface-2 );
	border-color: var( --color-surface-2 );
}

.cdx-message--block.cdx-message--error {
	background-color: var( --background-color-destructive-subtle );
	border-color: var( --background-color-destructive-subtle );
}

.cdx-message--block.cdx-message--warning {
	background-color: var( --background-color-warning-subtle );
	border-color: var( --background-color-warning-subtle );
}

.cdx-message--block.cdx-message--success {
	background-color: var( --background-color-success-subtle );
	border-color: var( --background-color-success-subtle );
}

.cdx-radio__icon {
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.cdx-radio__input:enabled:hover + .cdx-radio__icon {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.cdx-radio__input:enabled:active + .cdx-radio__icon {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-radio__input:enabled:checked + .cdx-radio__icon {
	background-color: var( --color-inverted-primary );
	border-color: var( --color-progressive );
}

.cdx-radio__input:enabled:checked:hover + .cdx-radio__icon {
	border-color: var( --color-progressive--hover );
}

.cdx-radio__input:enabled:checked:active + .cdx-radio__icon {
	border-color: var( --color-progressive--active );
}

.cdx-radio__input:enabled:checked:active + .cdx-radio__icon::before {
	border-color: var( --color-progressive--active );
}

.cdx-radio__input:disabled ~ .cdx-radio__label-content {
	color: var( --color-subtle );
}

.cdx-radio__input:disabled + .cdx-radio__icon {
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

/* Styles are already handled by other components */
.cdx-search-input--has-end-button {
	background-color: transparent;
	border-color: transparent;
	border-radius: var( --border-radius--small );
}

.cdx-select__handle {
	border-radius: var( --border-radius--small );
}

.cdx-select__indicator {
	color: var( --color-base );
}

.cdx-select--enabled .cdx-select__handle {
	color: var( --color-emphasized );
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.cdx-select--enabled .cdx-select__handle:hover {
	color: var( --color-emphasized );
	background-color: var( --color-surface-1 );
	border-color: var( --color-progressive--hover );
}

.cdx-select--enabled .cdx-select__handle:hover .cdx-select__indicator {
	color: var( --color-base );
}

.cdx-select--enabled .cdx-select__handle:focus {
	background-color: var( --color-surface-1 );
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-select--enabled .cdx-select__handle:active {
	color: var( --color-emphasized );
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-interactive );
}

.cdx-select--enabled.cdx-select--expanded .cdx-select__handle {
	background-color: var( --color-surface-1 );
}

.cdx-select--enabled.cdx-select--expanded .cdx-select__handle .cdx-select__indicator {
	color: var( --color-base );
}

.cdx-select--disabled .cdx-select__handle {
	color: var( --color-subtle );
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.cdx-select--disabled .cdx-select__indicator,
.cdx-select--disabled .cdx-select__start-icon {
	color: var( --color-subtle );
}

.cdx-tabs > .cdx-tabs__header:focus .cdx-tabs__list__item--enabled.cdx-tabs__list__item--selected [ role='tab' ] {
	box-shadow: inset 0 0 0 2px var( --color-progressive );
}

.cdx-tabs__list__item [ role='tab' ] {
	font-weight: var( --font-weight-medium );
	border-top-left-radius: var( --border-radius--small );
	border-top-right-radius: var( --border-radius--small );
}

.cdx-tabs__list__item [ role='tab' ]:focus {
	border-top-left-radius: var( --border-radius--small );
	border-top-right-radius: var( --border-radius--small );
}

.cdx-tabs--framed > .cdx-tabs__header {
	background-color: var( --color-surface-2 );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__prev-scroller::after {
	background-image: linear-gradient( to right, var( --color-surface-2 ) 0, rgba( 255, 255, 255, 0 ) 100% );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__next-scroller::before {
	background-image: linear-gradient( to left, var( --color-surface-2 ) 0, rgba( 255, 255, 255, 0 ) 100% );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:link,
.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:visited {
	color: var( --color-emphasized );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:hover {
	color: var( --color-emphasized );
	background-color: var( --background-color-button-quiet--hover );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:active {
	color: var( --color-emphasized );
	background-color: var( --background-color-button-quiet--active );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled.cdx-tabs__list__item--selected [ role='tab' ],
.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--enabled.cdx-tabs__list__item--selected [ role='tab' ]:hover {
	background-color: var( --color-surface-0 );
}

.cdx-tabs--framed > .cdx-tabs__header .cdx-tabs__list__item--disabled [ role='tab' ] {
	color: var( --color-subtle );
	background-color: var( --color-surface-4 );
}

.cdx-tabs--quiet > .cdx-tabs__header {
	background-color: var( --color-surface-0 );
	border-bottom-color: var( --border-color-base );
	// Shouldn't quiet tabs be transparent?
	// background-color: transparent;
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__prev-scroller::after {
	background-image: linear-gradient( to right, var( --color-surface-0 ) 0, rgba( 255, 255, 255, 0 ) 100% );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__next-scroller::before {
	background-image: linear-gradient( to left, var( --color-surface-0 ) 0, rgba( 255, 255, 255, 0 ) 100% );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ] {
	color: var( --color-base );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:hover {
	color: var( --color-progressive--hover );
	box-shadow: inset 0 -2px var( --color-progressive--hover );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__list__item--enabled [ role='tab' ]:active {
	color: var( --color-progressive--active );
	box-shadow: inset 0 -2px var( --color-progressive--active );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__list__item--enabled.cdx-tabs__list__item--selected [ role='tab' ] {
	color: var( --color-progressive );
	box-shadow: inset 0 -2px var( --color-progressive );
}

.cdx-tabs--quiet > .cdx-tabs__header .cdx-tabs__list__item--disabled [ role='tab' ] {
	color: var( --color-subtle );
}

.cdx-toggle-button {
	font-weight: var( --font-weight-medium );
	border-radius: var( --border-radius--small );
}

.cdx-toggle-button:enabled:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-toggle-button:enabled:active {
	color: var( --color-emphasized );
	border-color: var( --border-color-base );
}

.cdx-toggle-button--framed:enabled {
	background-color: var( --color-surface-2 );
	border-color: var( --border-color-base );
}

.cdx-toggle-button--framed:enabled:hover {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--hover );
}

.cdx-toggle-button--framed:enabled:active {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--active );
}

.cdx-toggle-button--framed:disabled {
	color: var( --color-subtle );
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:hover {
	background-color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:focus {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}

.cdx-toggle-button--framed.cdx-toggle-button--toggled-on:enabled:active {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2--active );
	border-color: var( --border-color-base );
}

.cdx-toggle-button--quiet:enabled.cdx-toggle-button--toggled-on {
	background-color: var( --background-color-button-quiet--active );
}

.cdx-toggle-button--quiet:enabled:hover {
	background-color: var( --background-color-button-quiet--hover );
}

.cdx-toggle-button--quiet:enabled:focus {
	background-color: var( --background-color-button-quiet--hover );
}

.cdx-toggle-button--quiet:enabled:active {
	background-color: var( --background-color-button-quiet--active );
}

.cdx-toggle-button--quiet:disabled {
	color: var( --color-subtle );
}

.cdx-toggle-button-group {
	border-radius: var( --border-radius--small );
}

.cdx-toggle-button-group .cdx-toggle-button:disabled {
	box-shadow: 0 -1px var( --border-color-base ), -1px 0 var( --border-color-base );
}

.cdx-toggle-button-group .cdx-toggle-button--toggled-on:enabled {
	box-shadow: 0 -1px var( --border-color-base ), -1px 0 var( --border-color-base );
}

.cdx-toggle-switch__switch {
	// Show background when hovered
	background-color: transparent;
	border-color: var( --border-color-interactive );
}

.cdx-toggle-switch__switch__grip {
	border-color: var( --border-color-interactive );
}

.cdx-toggle-switch__input:enabled ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	background-color: transparent;
}

.cdx-toggle-switch__input:enabled:hover ~ .cdx-toggle-switch__switch {
	background-color: var( --color-surface-0 );
	border-color: var( --color-progressive--hover );
}

.cdx-toggle-switch__input:enabled:hover ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	border-color: var( --color-progressive--hover );
}

.cdx-toggle-switch__input:enabled:active ~ .cdx-toggle-switch__switch {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
}

.cdx-toggle-switch__input:enabled:active ~ .cdx-toggle-switch__switch::before {
	border-color: var( --color-progressive--active );
}

.cdx-toggle-switch__input:enabled:focus:not( :active ) ~ .cdx-toggle-switch__switch {
	border-color: var( --color-progressive );
	box-shadow: inset 0 0 0 1px var( --color-progressive );
}

.cdx-toggle-switch__input:enabled:focus:not( :active ) ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	border-color: var( --color-progressive );
}

.cdx-toggle-switch__input:enabled:checked ~ .cdx-toggle-switch__switch {
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
}

.cdx-toggle-switch__input:enabled:checked:hover ~ .cdx-toggle-switch__switch {
	background-color: var( --color-progressive--hover );
	border-color: var( --color-progressive--hover );
}

.cdx-toggle-switch__input:enabled:checked:active ~ .cdx-toggle-switch__switch {
	background-color: var( --color-progressive--active );
	border-color: var( --color-progressive--active );
	box-shadow: inset 0 0 0 1px var( --color-progressive--active );
}

.cdx-toggle-switch__input:enabled:checked:active ~ .cdx-toggle-switch__switch::before {
	border-color: var( --color-progressive--active );
}

.cdx-toggle-switch__input:enabled:checked:focus:not( :active ) ~ .cdx-toggle-switch__switch {
	border-color: var( --color-progressive );
}

.cdx-toggle-switch__input:disabled ~ .cdx-toggle-switch__label {
	color: var( --color-subtle );
}

.cdx-toggle-switch__input:disabled ~ .cdx-toggle-switch__switch {
	background-color: var( --color-surface-4 );
	border-color: var( --color-surface-4 );
}

.cdx-toggle-switch__input:disabled ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	border-color: var( --color-subtle );
	box-shadow: inset 0 0 0 1px var( --color-subtle );
}

.cdx-toggle-switch__input:disabled:checked ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	background-color: var( --color-subtle );
}

.cdx-typeahead-search__menu-message,
.cdx-typeahead-search__search-footer {
	color: var( --color-base );
}

.cdx-typeahead-search__search-footer {
	border-top-color: var( --border-color-base );
}

.cdx-typeahead-search__search-footer:visited {
	color: var( --color-base );
}

.cdx-typeahead-search__search-footer__icon {
	color: var( --color-subtle );
}

.cdx-typeahead-search__search-footer__active .cdx-typeahead-search__search-footer__icon,
.cdx-typeahead-search__search-footer__active .cdx-typeahead-search__search-footer__text {
	color: var( --color-progressive );
}