/* Crown Bridge Buttons
   Pill = crownbridge.com "View Properties": white pill, black fill fades in and grows from the left on hover.
   Block = crownbridge.com "Properties +": a 40px block on the left that slides across to fill the button. */

.cbb-wrap { display: block; }
.cbb-wrap--left { text-align: left; }
.cbb-wrap--center { text-align: center; }
.cbb-wrap--right { text-align: right; }

.cbb {
	--cbb-color: #000;
	--cbb-hcolor: #fff;
	--cbb-bg: #fff;
	--cbb-fill: #000;
	--cbb-start: 20%;
	--cbb-start-op: 0;
	--cbb-bw: 0px;
	--cbb-bc: transparent;
	--cbb-hbc: transparent;
	--cbb-radius: 50em;
	--cbb-minw: 244px;
	--cbb-minh: 50px;
	--cbb-pad: 10px 24px;
	--cbb-fs: 14px;
	--cbb-ls: 0.1em;
	--cbb-fw: 400;
	--cbb-tt: uppercase;
	--cbb-gap: 10px;
	--cbb-isize: 0.8em;
	--cbb-dur: 0.4s;
	--cbb-ease: ease;
	--cbb-ff: inherit;

	position: relative;
	z-index: 0;
	isolation: isolate;
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--cbb-gap);
	box-sizing: border-box;
	min-width: var(--cbb-minw);
	min-height: var(--cbb-minh);
	padding: var(--cbb-pad);
	vertical-align: middle;

	font-family: var(--cbb-ff);
	font-size: var(--cbb-fs);
	font-weight: var(--cbb-fw);
	line-height: 1.2;
	letter-spacing: var(--cbb-ls);
	text-transform: var(--cbb-tt);
	text-align: center;
	text-decoration: none !important;

	color: var(--cbb-color) !important;
	background: var(--cbb-bg);
	border: var(--cbb-bw) solid var(--cbb-bc);
	border-radius: var(--cbb-radius);

	/* Background swaps back instantly when the pointer leaves. */
	transition: color var(--cbb-dur) var(--cbb-ease), border-color var(--cbb-dur) var(--cbb-ease), background-color 0s linear 0s;
	-webkit-tap-highlight-color: transparent;
}

/* The animated fill. It reaches 1px past every edge so no background shows
   through the smoothed (anti-aliased) rounded edges. */
.cbb::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: var(--cbb-start);
	opacity: var(--cbb-start-op);
	background: var(--cbb-fill);
	border-radius: inherit;
	transition: width var(--cbb-dur) var(--cbb-ease), height var(--cbb-dur) var(--cbb-ease), opacity var(--cbb-dur) var(--cbb-ease);
	pointer-events: none;
}

.cbb--fill-right::before { left: auto; right: -1px; }
.cbb--fill-center::before { left: 50%; transform: translateX(-50%); }
.cbb--fill-up::before,
.cbb--fill-down::before { left: -1px; right: -1px; width: auto; height: var(--cbb-start); }
.cbb--fill-up::before { top: auto; bottom: -1px; }
.cbb--fill-down::before { bottom: auto; top: -1px; }

.cbb:hover,
.cbb:focus-visible {
	color: var(--cbb-hcolor) !important;
	border-color: var(--cbb-hbc);
	/* Once the fill has finished, the button itself takes the fill colour,
	   so nothing of the original background is left at the edges. */
	background-color: var(--cbb-fill);
	transition: color var(--cbb-dur) var(--cbb-ease), border-color var(--cbb-dur) var(--cbb-ease), background-color 0s linear var(--cbb-dur);
}

.cbb:hover::before,
.cbb:focus-visible::before {
	width: calc(100% + 2px);
	opacity: 1;
}

.cbb--fill-up:hover::before,
.cbb--fill-up:focus-visible::before,
.cbb--fill-down:hover::before,
.cbb--fill-down:focus-visible::before {
	width: auto;
	height: calc(100% + 2px);
}

.cbb:focus-visible {
	outline: 2px solid var(--cbb-fill);
	outline-offset: 3px;
}

.cbb__text { position: relative; }

.cbb__icon {
	font-size: var(--cbb-isize);
	color: var(--cbb-icolor, inherit);
	line-height: 1;
	transition: transform var(--cbb-dur) var(--cbb-ease), color var(--cbb-dur) var(--cbb-ease);
}

.cbb:hover .cbb__icon,
.cbb:focus-visible .cbb__icon { color: var(--cbb-hicolor, var(--cbb-icolor, inherit)); }

.cbb--icon-move:hover .cbb__icon,
.cbb--icon-move:focus-visible .cbb__icon { transform: translateX(4px); }

.cbb--icon-move.cbb--icon-left:hover .cbb__icon,
.cbb--icon-move.cbb--icon-left:focus-visible .cbb__icon { transform: translateX(-4px); }

@media (max-width: 640px) {
	.cbb--mobile-full { display: flex; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cbb,
	.cbb::before,
	.cbb__icon { transition: none; }
}