.painike,
.nappi {
	font-family: interface, sans-serif;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .25em;
	font-size: 1em;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}
.painike {
	padding: 0 var(--painike-padding-width);
	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: var(--painike-pyoristys);
}
.painike.disabled,
.nappi.disabled {
	pointer-events: none;
}

.painike > .lucide,
.nappi > .lucide {
	width: .8em;
	height: .8em;
}
.painike > div {
	font-size: .8em;
}


/* 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 {
	padding-left: 0;
	padding-right: 0;
}
.painikeW,
.nappiW {
	color: var(--text-black);
	border-color: transparent;
	background-color: transparent;
}
html.no-touch .painikeW:not(.disabled):not(.selected):hover,
html.no-touch .nappiW:not(.disabled):not(.selected):hover {
	color: var(--text-black);
	border-color: transparent;
	background-color: transparent;
	text-decoration: underline;
}
.painikeW.selected,
.nappiW.selected {
	color: var(--text-black);
	border-color: transparent;
	background-color: transparent;
	text-decoration: underline;
}
.painikeW.disabled,
.nappiW.disabled {
	color: var(--text-black);
	border-color: transparent;
	background-color: transparent;
	opacity: .6;
}
.painikeW.toggle > .lucide,
.nappiW.toggle > .lucide {
	color: var(--painike-taustavari);
}


/* 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:not(.painikeW) > .lucide:nth-child(1),
.painike.toggle:not(.painikeW) > .lucide:nth-child(2) {
	margin-left: -.2em;
}
.painike.toggle.toggled > .lucide:nth-child(1),
.painike.toggle:not(.toggled) > .lucide:nth-child(2) {
	display: none;
}
.painikeW.toggle > .lucide,
.nappiW.toggle > .lucide {
	width: 1.5em !important;
	height: 1.5em !important;
}