button {
	border: none;
	cursor: pointer;
	background-color: inherit;
	text-decoration: none;
	border-radius: 4px;
}

[role=button],
button {
	background-color: var(--bg-btn);
	color: var(--fg-btn);
	display: inline-block;
	cursor: pointer;
	padding: 0.6em;
	margin: auto;
	outline: none;
	font-size: 1.1em;
	width: fit-content;
}

[role=button]:hover,
button:hover {
	background-color: var(--bg-btn-hover);
	color: var(--fg-btn-hover);
}

[role=button]:focus,
button:focus {
	outline: none;
	box-shadow: inset 0 0 1px 1px var(--btn-border-focus);
}

[role=button]:disabled,
button:disabled {
	opacity: 0.3;
}

[role=button].button,
button.button {
	background-color: var(--bg-btn);
	color: var(--fg-btn);
	font-size: 1rem;
	line-height: 1rem;
	border-radius: 4px;
	font-weight: bold;

}

[role=button]>._icon,
button>._icon {
	width: auto;
	height: 1em;
	margin: 0;
}

[role=button].button:hover,
button:hover {
	background-color: var(--bg-btn-hover);
	color: var(--fg-btn-hover);
}

[role=button].button.small,
button.small {
	padding: 0 .5em;
}

[role=button].alert,
button.alert {
	background-color: var(--bg-btn-alert);
	color: var(--fg-btn-alert);
}

[role=button].button.alert:hover,
button.alert:hover {
	background-color: var(--bg-btn-alert-hover);
	color: var(--fg-btn-alert-hover);
}


[role=button].action,
button.action {
	background-color: var(--bg-btn-action);
	color: var(--fg-btn-action);
}

[role=button].button.action:hover,
button.action:hover {
	background-color: var(--bg-btn-action-hover);
	color: var(--fg-btn-action-hover);
}

[role=button].disabled,
button.disabled {
	filter: brightness(.3);
}

[role=button].selected,
button.selected {
	background-color: var(--btn--bg--selected);
}

[role=button].addBt span,
button.addBt span {
	display: none;
}

[role=button].addBt:before,
button.addBt:before {
	color: transparent;
	text-shadow: 0 0 0 var(--btn--fg--add);
	content: "➕";
	margin-right: .4em;
}

[role=button].rmBt:before,
button.rmBt:before {
	color: transparent;
	text-shadow: 0 0 0 var(--btn-fg);
	content: "✕";
	margin-right: .4em;
}


.switchField {
	position: relative;
	display: flex;
	width: 100%;
}

.switchField input {
	vertical-align: middle;
}

.switchContainer {
	position: relative;
	width: 50px;
}

.switchContainer input {
	position: absolute;
	top: 10%;
	right: 10%;
}

.switchContainer label {
	position: relative;
	display: block;
	width: 40px;
	height: 20px;
}

.switchContainer label::before,
.switchContainer label::after {
	display: block;
	content: '';
	pointer-events: none;
}

.switchContainer label::before {
	height: 1em;
	width: 2em;
	border: solid 1px var(--btn-sw-border);
	border-radius: 1em;
	transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.switchContainer label::after {
	position: absolute;
	top: 0px;
	left: 0px;
	width: .8em;
	height: .8em;
	margin-top: 0.1em;
	margin-left: 0.1em;
	background-color: var(--btn-sw-cursor);
	border-radius: 50%;
	transition: background-color .3s, transform .3s;
}

.switchContainer input:checked+label::before {
	background-color: var(--btn-sw-checked);
	border-color: var(--btn-sw-checked);
}

.switchContainer input:checked+label::after {
	background-color: var(--btn-sw-checked-cursor);
	transform: translateX(1em);
}

.switchContainer input:focus+label::before {
	box-shadow: 0 0 0 0.1em var(--btn-sw-checked);
	border-color: var(--btn-sw-checked);
}