button,
.button {
	padding: var(--gl-micro-4) var(--gl-narrowest);
	border-radius: var(--br-button);
	border: 1px solid;
	font-family: var(--fn-secondary);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 150%;
	/*box-shadow: var(--sd-normal);*/
	cursor: pointer;
	outline: none;
	user-select: none;
	align-items: center;
	display: flex;
	flex-direction: row;
	white-space: nowrap;
}
button.slim,
.button.slim {
	padding: var(--gl-micro-3) var(--gl-narrowest);
}

/* NORMAL */
button,
.button {
	background-color: var(--cl-shady-2);
	border-color: var(--cl-shady-2);
	color: var(--cl-white);
}
button:hover,
button:focus,
.button:hover,
.button:focus {
	background-color: var(--cl-shady-1);
	border-color: var(--cl-shady-1);
	color: var(--cl-white);
	box-shadow: var(--sd-hover);
}
button:active,
.button:active {
	background-color: var(--cl-shady-3);
	border-color: var(--cl-shady-3);
	color: var(--cl-white);
	box-shadow: var(--sd-active);
}

/* PRIMARY */
button.primary,
.button.primary {
	background-color: var(--cl-primary-3);
	border-color: var(--cl-primary-3);
	color: var(--cl-white);
}
button.primary:hover,
button.primary:focus,
.button.primary:hover,
.button.primary:focus {
	background-color: var(--cl-primary-2);
	border-color: var(--cl-primary-2);
	color: var(--cl-white);
}
button.primary:active,
.button.primary:active {
	background-color: var(--cl-primary-4);
	border-color: var(--cl-primary-4);
	color: var(--cl-white);
}

/* SECONDARY */
button.secondary,
.button.secondary {
	background-color: var(--cl-emphasis-5);
	border-color: var(--cl-emphasis-5);
	color: var(--cl-white);
}
button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
	background-color: var(--cl-emphasis-4);
	border-color: var(--cl-emphasis-4);
	color: var(--cl-white);
}
button.secondary:active,
.button.secondary:active {
	background-color: var(--cl-emphasis-5);
	border-color: var(--cl-emphasis-5);
	color: var(--cl-white);
}

/* TERTIARY */
button.tertiary,
.button.tertiary {
	background-color: transparent;
	border-color: var(--cl-primary-3);
	color: var(--cl-primary-3);
}
button.tertiary:hover,
button.tertiary:focus,
.button.tertiary:hover,
.button.tertiary:focus {
	background-color: var(--cl-white);
	border-color: var(--cl-primary-2);
	color: var(--cl-primary-2);
}
button.tertiary:active,
.button.tertiary:active {
	background-color: var(--cl-bright-2);
	border-color: var(--cl-primary-3);
	color: var(--cl-primary-3);
}

button.withicon.before:before,
.button.withicon.before:before {
	content: "";
	position: relative;
	display: flex;
	width: 20px;
	height: 20px;
	margin-right: var(--gl-micro-3);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
}

button.withicon.after:after,
.button.withicon.after:after {
	content: "";
	position: relative;
	display: flex;
	width: 20px;
	height: 20px;
	margin-left: var(--gl-micro-3);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
}
button.withicon:hover:before,
.button.withicon:hover:before {
	opacity: 0.75;
}
button.withicon:hover:after,
.button.withicon:hover:after {
	opacity: 0.75;
}
button.withicon.before:active:before,
button.withicon.before:focus:before,
.button.withicon.before:active:before,
.button.withicon.before:focus:before,
button.withicon.after:active:after,
button.withicon.after:focus:after,
.button.withicon.after:active:after,
.button.withicon.after:focus:after {
	opacity: 1;
}

.withicon.before:before,
.withicon.before.primary:before,
.withicon.before.secondary:before,
.withicon.after:after,
.withicon.after.primary:after,
.withicon.after.secondary:after {
	filter: brightness(1000%);
}

.withicon.before.tertiary:before,
.withicon.after.tertiary:after {
	filter: brightness(100%);
}