.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: var(--painike-pyoristys);
}
.nappi {
	width: var(--painike-mitat);
	height: var(--painike-mitat);
	border-radius: 50%;
}
.nappi-square {
	border-radius: .25em;
}
.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;
}


/* primary 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);
}

/* secondary 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);
}
.painike2.selected,
.nappi2.selected {
	color: var(--painike2-vari-selected);
	border: var(--painike2-kehys-selected);
	background-color: var(--painike2-taustavari-selected);
}
.painike2.disabled,
.nappi2.disabled {
	color: var(--painike2-vari-disabled);
	border: var(--painike2-kehys-disabled);
	background-color: var(--painike2-taustavari-disabled);
}

/* destructive round */
.painike3,
.nappi3 {
	color: var(--painike3-vari);
	border: var(--painike3-kehys);
	background-color: var(--painike3-taustavari);
}
html.no-touch .painike3:not(.disabled):not(.selected):hover,
html.no-touch .nappi3:not(.disabled):not(.selected):hover {
	color: var(--painike3-vari-hover);
	border: var(--painike3-kehys-hover);
	background-color: var(--painike3-taustavari-hover);
}
.painike3.selected,
.nappi3.selected {
	color: var(--painike3-vari-selected);
	border: var(--painike3-kehys-selected);
	background-color: var(--painike3-taustavari-selected);
}
.painike3.disabled,
.nappi3.disabled {
	color: var(--painike3-vari-disabled);
	border: var(--painike3-kehys-disabled);
	background-color: var(--painike3-taustavari-disabled);
}

/* 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 {
	width: .9em;
	height: .9em;
	margin-left: -.45em;
	stroke-width: 2px;
	color: var(--neutral-900);
}
.painike.toggle > svg circle {
	fill: var(--neutral-000);
	stroke: transparent;
}
.painike2.toggle > svg circle {
	stroke: var(--strokes-neutral-dark);
}
.painike.toggle.disabled > svg circle {
	fill: transparent;
	stroke: var(--disabled-other);
}
.painike.toggle.toggled.disabled > svg path {
	stroke: var(--disabled-text);
}
.painike.toggle.toggled > svg:nth-child(1),
.painike.toggle:not(.toggled) > svg:nth-child(2) {
	display: none;
}