/*
 * Citizen
 *
 * SkinStyles for MediaWiki
 * Module: mediawiki.ui.checkbox
 * Version: REL1_39
 *
 * Date: 2022-11-30
*/

.mw-ui-checkbox {
	[ type='checkbox' ] {
		& + label:before {
			border-color: var( --border-color-base );
			border-radius: var( --border-radius--small );
			// Show background when hovered
			background-color: transparent;
		}

		&:enabled {
			&:focus + label:before {
				border-color: var( --color-primary );
				box-shadow: inset 0 0 0 1px var( --color-primary );
			}

			&:hover + label:before {
				border-color: var( --color-primary--hover );
				background-color: var( --color-surface-0 );
			}

			&:active + label:before {
				border-color: var( --color-primary--active );
				background-color: var( --color-primary--active );
				box-shadow: inset 0 0 0 1px var( --color-primary--active );
			}

			&:checked {
				& + label:before {
					border-color: var( --color-primary );
					background-color: var( --color-primary );
				}

				&:focus + label:before {
					border-color: var( --color-primary );
					background-color: var( --color-primary );
					box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
				}

				&:hover + label:before {
					border-color: var( --color-primary--hover );
					background-color: var( --color-primary--hover );
				}

				&:active + label:before {
					border-color: var( --color-primary--active );
					background-color: var( --color-primary--active );
				}
			}
		}

		&:disabled + label:before {
			border-color: var( --color-surface-4 );
			background-color: var( --color-surface-4 );
		}
	}
}