@layer components {
	:where(
	[type="button"],
	.btn) {
		padding: 0.85rem 2rem 0.8rem;
		font-weight: 400;
		white-space: nowrap;
		text-align: center;
		text-decoration: none;
		color: hsl(var(--clr-dark-brown));
		border: 1px solid hsl(var(--clr-sand));
		background-color: hsl(var(--clr-sand));
		position: relative;
		display: inline-block;
		cursor: pointer;
		box-shadow: -2px 2px 6px rgba(0,0,0, .1);
		border-radius: 5px;
		transition: background-color .3s;
		-webkit-touch-callout: none;
	}
	
	:where(
	[type="button"],
	.btn):hover{
	    background-color: hsl(39, 25%, 85%);
	}

	:where(
	[type="button"],
	.btn).btn-primary {
		background-color: hsl(var(--clr-teal));
		border-color: hsl(var(--clr-teal));
		color: white;
	}

	:where(
	[type="button"],
	.btn).btn-primary:hover {
		background-color: hsl(var(--clr-dark-teal));
		border-color: hsl(var(--clr-dark-teal));
	}

	:where(
	[type="button"],
	.btn).btn-secondary {
		border-color: hsl(var(--clr-dark-brown));
	}

	:where(
	[type="button"],
	.btn).btn-secondary:hover {
		background-color: hsl(39, 30%, 89%);
	}

	:where(
	[type="button"],
	.btn).btn-reverse {

	}
}