.painike,
.nappi {
	font-family: open-sans, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}
.painike {
	padding: 0 calc(var(--painike-mitat) / 2);
	min-width: var(--painike-mitat);
	min-height: var(--painike-mitat);
	border-radius: calc(var(--painike-mitat) / 2);
}
.nappi {
	width: var(--painike-mitat);
	height: var(--painike-mitat);
	border-radius: 50%;/* border-radius: calc(var(--painike-mitat) / 2); */
}
.painike.disabled,
.nappi.disabled {
	pointer-events: none;
}

.painike > svg,
.nappi > svg {
	width: .8em;
	height: .8em;
}
.painike > svg:last-child {
	transform: scale(1.25);
}
.painike > svg:not(:last-child){
	margin-right: .2em;
}
.painike > svg {
	margin-left: -.3em;
}
.painike > div {
	font-size: .7em;
}


/* värillinen round */
.painike,
.nappi {
	color: var(--painike-vari);
	border: var(--painike-kehys);
	background-color: var(--painike-taustavari);
}
html.no-touch .painike:not(.disabled):not(.selected):hover,
html.no-touch .nappi:not(.disabled):not(.selected):hover {
	color: var(--painike-vari-hover);
	border: var(--painike-kehys-hover);
	background-color: var(--painike-taustavari-hover);
}
.painike.selected,
.nappi.selected {
	color: var(--painike-vari-selected);
	border: var(--painike-kehys-selected);
	background-color: var(--painike-taustavari-selected);
}
.painike.disabled,
.nappi.disabled {
	color: var(--painike-vari-disabled);
	border: var(--painike-kehys-disabled);
	background-color: var(--painike-taustavari-disabled);
}

/* värillinen2 round */
.painike2,
.nappi2 {
	color: var(--painike2-vari);
	border: var(--painike2-kehys);
	background-color: var(--painike2-taustavari);
}
html.no-touch .painike2:not(.disabled):not(.selected):hover,
html.no-touch .nappi2:not(.disabled):not(.selected):hover {
	color: var(--painike2-vari-hover);
	border: var(--painike2-kehys-hover);
	background-color: var(--painike2-taustavari-hover);
}

/* valkoinen round kehyksellä */
.painikeW {
	font-weight: 600;
}
.painikeW,
.nappiW {
	color: var(--painike-taustavari);
	border: var(--painike-kehys);
	background-color: var(--painike-vari);
}
html.no-touch .painikeW:not(.disabled):not(.selected):hover,
html.no-touch .nappiW:not(.disabled):not(.selected):hover {
	color: var(--painike-taustavari-hover);
	border: var(--painike-kehys-hover);
	background-color: var(--painike-vari-hover);
}
.painikeW.selected,
.nappiW.selected {
	color: var(--painike-taustavari-selected);
	border: var(--painike-kehys-selected);
	background-color: var(--painike-vari-selected);
}
.painikeW.disabled,
.nappiW.disabled {
	color: var(--painike-taustavari-disabled);
	border: var(--painike-kehys-disabled);
	background-color: var(--painike-vari-disabled);
}


/* confirm-painike (true) round kehyksellä */
.painike-true,
.nappi-true {
	color: var(--painike-true-vari);
	border: var(--painike-true-kehys);
	background-color: var(--painike-true-taustavari);
}
html.no-touch .painike-true:not(.disabled):not(.selected):hover,
html.no-touch .nappi-true:not(.disabled):not(.selected):hover {
	color: var(--painike-true-vari-hover);
	border: var(--painike-true-kehys-hover);
	background-color: var(--painike-true-taustavari-hover);
}
.painike-true.selected,
.nappi-true.selected {
	color: var(--painike-true-vari-selected);
	border: var(--painike-true-kehys-selected);
	background-color: var(--painike-true-taustavari-selected);
}
.painike-true.disabled,
.nappi-true.disabled {
	color: var(--painike-true-vari-disabled);
	border: var(--painike-true-kehys-disabled);
	background-color: var(--painike-true-taustavari-disabled);
}
/* confirm-painike (false) round kehyksellä */
.painike-false,
.nappi-false {
	color: var(--painike-false-vari);
	border: var(--painike-false-kehys);
	background-color: var(--painike-false-taustavari);
}
html.no-touch .painike-false:not(.disabled):not(.selected):hover,
html.no-touch .nappi-false:not(.disabled):not(.selected):hover {
	color: var(--painike-false-vari-hover);
	border: var(--painike-false-kehys-hover);
	background-color: var(--painike-false-taustavari-hover);
}
.painike-false.selected,
.nappi-false.selected {
	color: var(--painike-false-vari-selected);
	border: var(--painike-false-kehys-selected);
	background-color: var(--painike-false-taustavari-selected);
}
.painike-false.disabled,
.nappi-false.disabled {
	color: var(--painike-false-vari-disabled);
	border: var(--painike-false-kehys-disabled);
	background-color: var(--painike-false-taustavari-disabled);
}

/* toggle */
.painike.toggle > svg {
	margin-left: -.6em;
}
.painike.toggle > svg {
	width: 1.15em;
	height: 1.15em;
	stroke-width: 1.5px;
}
.painike.toggle.toggled > svg:nth-child(1),
.painike.toggle:not(.toggled) > svg:nth-child(2) {
	display: none;
}