/*
	Styles
*/

.ouinon {
	position: relative;
	min-width: 4em;
	width: auto;

	button {
		display: inline-block;
		border-style: solid;
		border-width: 1px 0 1px 1px;
		border-radius: 0;
		font-size: inherit;
		background: color-mix(in srgb, var(--couleur-fond) 20%, transparent);
		color: var(--couleur-texte);
		&:first-child {
			border-radius: 4px 0 0 4px;
		}
		&:last-child {
			border-radius: 0 4px 4px 0;
			border-right-width: 1px;
		}
		&::before {
			content: "☐";
			font-weight: bold;
			font-size: 110%;
			margin-right: .2em;
		}
	}

	button[disabled] {
		cursor: default;
		opacity: .2;
	}

	button:not([disabled]) {
		cursor: pointer;
		&:hover {
			background: color-mix(in srgb, var(--couleur-fond) 40%, transparent);
		}
	}

	&.oui .oui[disabled],
	&.non .non[disabled] {
		opacity: 1;
	}

	&.oui .oui:not([disabled]),
	&.non .non:not([disabled]) {
		background: var(--couleur-fond);
		&:hover {
			background: var(--couleur-fond);
		}
	}

	&.oui .oui,
	&.non .non {
		&::before {
			content: "☑";
		}
	}

}