mediawiki-skins-Citizen/skinStyles/mediawiki/ui/mediawiki.ui.components.button.less

/*
 * Citizen - Buttons
 * https://starcitizen.tools
*/

@import '../../../resources/variables.less';

.mw-ui-button {
	border-color: var( --border-color-base );
	background-color: var( --background-color-framed );
	color: var( --color-base );

	&:visited {
		color: var( --color-base );
	}

	&:hover {
		border-color: var( --border-color-base );
		background-color: var( --background-color-framed--hover );
		color: var( --color-base--emphasized );
	}

	&:focus {
		border-color: var( --color-primary );
		background-color: var( --background-color-framed );
		box-shadow: inset 0 0 0 1px var( --color-primary );
		color: var( --color-base );
	}

	&:active,
	&.is-on {
		border-color: var( --background-color-framed--active );
		background-color: var( --background-color-framed--active );
		color: var( --color-base--subtle );
	}

	&:disabled {
		border-color: var( --background-color-framed--active );
		background-color: var( --background-color-framed--active );
		color: var( --color-base--subtle );

		&:hover,
		&:active {
			border-color: var( --background-color-framed--active );
			background-color: var( --background-color-framed--active );
			color: var( --color-base--subtle );
		}
	}

	&.mw-ui-quiet,
	&.mw-ui-quiet.mw-ui-progressive,
	&.mw-ui-quiet.mw-ui-destructive {
		color: var( --color-base );

		&:hover {
			background-color: var( --background-color-quiet--hover );
			color: var( --color-base--emphasized );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
			color: var( --color-base--subtle );
		}

		&:focus {
			color: var( --color-base );
		}

		&:disabled,
		&:disabled:hover,
		&:disabled:active {
			color: var( --color-base--subtle );
		}
	}

	&.mw-ui-progressive {
		background-color: var( --color-primary );

		&:hover {
			background-color: var( --color-primary--hover );
		}

		&:active {
			background-color: var( --color-primary--active );
		}

		&:focus {
			background-color: var( --color-primary );
		}

		&.mw-ui-quiet {
			color: var( --color-primary );

			&:hover {
				color: var( --color-primary--hover );
			}

			&:active {
				color: var( --color-primary--active );
			}

			&:focus {
				color: var( --color-primary );
			}
		}
	}

	&.mw-ui-destructive {
		&.mw-ui-quiet {
			color: var( --color-destructive );

			&:hover {
				color: var( --color-destructive--hover );
			}

			&:active {
				color: var( --color-destructive--active );
			}

			&:focus {
				color: var( --color-destructive );
			}
		}
	}
}