.#{$prefix} {
	.button {
		background: rgb(var(--wpt-lms-white));
		border: 0.063rem solid rgb(var(--wpt-lms-primary-700));
		border-radius: 0.5rem;
		box-shadow: 0 0.125rem 0.063rem rgba(var(--wpt-lms-primary-700), 0.063);
		font-size: 0.875rem;
		// height: 2.75rem;
		height: 2.375rem;
		line-height: 0.875rem;
		// padding: 0 1.125rem;
		padding: 0 1rem;
		color: rgb(var(--wpt-lms-primary-700));
		transition: all 0.2s ease-in-out;
		font-weight: 500;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		i {
			color: rgb(var(--wpt-lms-primary-700));
		}
	}
	.button.button-small {
		height: auto;
	}
	.button:hover,
	.button.focus,
	.button:focus,
	.button.active,
	.button:active {
		background-color: rgb(var(--wpt-lms-primary-700), 5%);
		box-shadow: 0 0.25rem 0.375rem rgba(var(--wpt-lms-primary-800), 0.12);
		color: rgb(var(--wpt-lms-primary-800));
		outline: none;
		outline-offset: 0;
		border-color: rgb(var(--wpt-lms-primary-800));
	}
	.button.wpt-btn-primary,
	.button.button-primary {
		background: rgb(var(--wpt-lms-primary-700));
		border: none;
		color: rgb(var(--wpt-lms-white));
	}
	.button.wpt-btn-primary:hover,
	.button.button-primary:hover,
	.button.wpt-btn-primary:focus,
	.button.button-primary:focus,
	.button.wpt-btn-primary:active,
	.button.button-primary:active {
		background-color: rgb(var(--wpt-lms-primary-800));
		box-shadow: 0 0.25rem 0.375rem rgba(var(--wpt-lms-primary-800), 0.12);
		color: rgb(var(--wpt-lms-white));
	}
	.button-secondary:hover,
	.button-secondary:focus,
	.button-secondary:active {
		outline: none;
		outline-offset: 0;
		background-color: rgb(var(--wpt-lms-primary-50));
		box-shadow: 0 0.25rem 0.375rem rgba(var(--wpt-lms-primary-800), 0.12);
		color: rgb(var(--wpt-lms-primary-50));
		border-color: rgb(var(--wpt-lms-primary-800));
	}
	:focus-visible {
		outline: rgb(var(--wpt-lms-primary-800)) auto 0.063rem;
	}
	.button[disabled] {
		// background-color: transparent !important;
		opacity: 0.5;
	}
}