button:focus,
input:focus,
textarea:focus,
select:focus,
label:focus-within,
a:focus {
	outline: none;
	position: relative;
}

button:focus::before,
label:focus-within::before,
a:focus::before {
	content: '';
	position: absolute;
	display: block;
	top: 2px;
	right: 2px;
	bottom: 2px;
	left: 2px;
	border: 1px dashed;
}

input:not([type=checkbox], [type=radio], [type=range], [type=color]),
textarea,
select {
	background-color: #fff;
	border-bottom: 1px solid var(--color-primary);
	padding: 0.45rem 0;
	color: inherit;
	width: 100%;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.65rem;
}

.btn.primary {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.btn:disabled {
	opacity: .7;
}