_button.scss

.btn, input[type=submit] {
	@include var(background-color, "accent");
	@include var(color, "on-accent");
	@include shadow-light;

	outline: none;
	text-decoration: none;
	font-size: sp(14);

	border: 1px solid transparent;
	border-radius: 5px;
	padding: 0.5rem 1rem;

	user-select: none;
	cursor: pointer;

	transition: box-shadow .25s, background-color .25s, border-color .25s, color .25s;
	-moz-transition: box-shadow .25s, background-color .25s, border-color .25s, color .25s;
	-webkit-transition: box-shadow .25s, background-color .25s, border-color .25s, color .25s;

	&.btn-sm {
		font-size: sp(10);
		padding: 0.4rem 0.75rem;
	}

	&.btn-lg {
		font-size: sp(18);
		padding: 0.75rem 1.5rem;
	}

	@each $key in $theme-keys {
		&.btn-#{$key}, &.btn-outline-#{$key} {
			&:hover {
				@include var(background-color, ("#{$key}-2", !important));
			}

			&:focus {
				@include var(background-color, ($key, !important));
				@include shadow-outline("#{$key}-4");
			}
		}

		&.btn-#{$key} {
			@include var(background-color, ($key, !important));
		}

		&.btn-outline-#{$key} {
			@include var(background-color, ("neutral", !important));
			@include var(color, ("#{$key}-2", !important));
			border-color: currentColor;

			&:hover, &:focus {
				@include var(color, ("on-accent", !important));
			}
		}
	}

	&:hover {
		@include var(background-color, "accent-2");
		@include var(color, "on-accent");
		@include shadow;

		border-color: transparent;
		text-decoration: none;
	}

	&:focus {
		@include var(background-color, "accent");
		@include var(color, "on-accent");
		@include shadow-outline("accent-4");

		border-color: transparent;
	}

	&[disabled] {
		@include var(color, "secondary-4");
		background: none;
		box-shadow: none;
		border-color: currentColor;
	}
}