:root{
	--bf-color-green-light: #7cc242;
	--bf-color-white: #ffffff;
	--bf-color-shadow-soft: rgba(0, 0, 0, 0.12);
	--bf-color-shadow-deep: rgba(0, 0, 0, 0.18);

	--bf-font-contact: 'OfficinaSanITC-Book-Regular', Arial, sans-serif;

	--bf-sidebar-top: 133px;
	--bf-sidebar-right: 0;
	--bf-sidebar-z: 1500;

	--bf-contact-gap: 0.5rem;

	--bf-icon-box-size: 3.4rem;
	--bf-icon-size: 1.6rem;

	--bf-panel-padding-x: 1rem;
	--bf-panel-font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);

	--bf-panel-height: 3.4rem;
	--bf-panel-width: 14rem;

	--bf-shadow-rest: 0 0.25rem 0.9rem var(--bf-color-shadow-soft);
	--bf-shadow-open: 0 0.65rem 1.8rem var(--bf-color-shadow-deep);

	--bf-speed-panel: 320ms;
	--bf-speed-button: 180ms;
	--bf-ease-material: cubic-bezier(0.22, 1, 0.36, 1);
}

.bf-contact-sidebar{
	position: fixed;
	top: var(--bf-sidebar-top);
	right: var(--bf-sidebar-right);
	z-index: var(--bf-sidebar-z);

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--bf-contact-gap);

	font-family: var(--bf-font-contact);
	
	pointer-events: none;
}

.bf-contact-sidebar .bf-contact-panel .bf-contact-link,
.bf-contact-sidebar .bf-contact-panel .bf-contact-link:link,
.bf-contact-sidebar .bf-contact-panel .bf-contact-link:visited,
.bf-contact-sidebar .bf-contact-panel .bf-contact-link:hover,
.bf-contact-sidebar .bf-contact-panel .bf-contact-link:active,
.bf-contact-sidebar .bf-contact-panel .bf-contact-link:focus{
	color: #ffffff !important;
	text-decoration: none !important;
}

.bf-contact-item{
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}

.bf-contact-panel{
	width: var(--bf-panel-width);
	min-height: var(--bf-panel-height);
	padding: 0 var(--bf-panel-padding-x);

	display: flex;
	align-items: center;
	justify-content: flex-start;

	background: var(--bf-color-green-light);
	color: var(--bf-color-white);
	box-shadow: var(--bf-shadow-rest);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translateX(2.25rem) scaleX(0.92);
	transform-origin: right center;

	will-change: transform, opacity;
	transition:
		transform var(--bf-speed-panel) var(--bf-ease-material),
		opacity 220ms ease,
		box-shadow var(--bf-speed-panel) ease,
		visibility 0s linear var(--bf-speed-panel);
}

.bf-contact-item:hover .bf-contact-panel,
.bf-contact-item:focus-within .bf-contact-panel,
.bf-contact-item.is-open .bf-contact-panel{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0) scaleX(1);
	box-shadow: var(--bf-shadow-open);
	transition:
		transform var(--bf-speed-panel) var(--bf-ease-material),
		opacity 220ms ease,
		box-shadow var(--bf-speed-panel) ease,
		visibility 0s linear 0s;
}

.bf-contact-link{
	display: inline-flex;
	align-items: center;
	width: 100%;
	min-height: 100%;
	color: #ffffff !important;
	text-decoration: none;
	font-family: var(--bf-font-contact);
	font-size: var(--bf-panel-font-size);
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.bf-contact-link.a{
	color: #ffffff !important;
}

.bf-contact-toggle{
	width: var(--bf-icon-box-size);
	min-width: var(--bf-icon-box-size);
	height: var(--bf-icon-box-size);

	border: 0;
	padding: 0.4rem;
	background: var(--bf-color-green-light);
	box-shadow: var(--bf-shadow-rest);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	-webkit-tap-highlight-color: transparent;

	transition:
		transform var(--bf-speed-button) ease,
		box-shadow var(--bf-speed-button) ease,
		filter var(--bf-speed-button) ease;
	
	pointer-events: auto;
}

.bf-contact-toggle:hover{
	filter: brightness(1.03);
	box-shadow: var(--bf-shadow-open);
}

.bf-contact-toggle:active{
	transform: scale(0.97);
}

.bf-contact-toggle img{
	display: block;
	width: var(--bf-icon-size);
	height: var(--bf-icon-size);
	object-fit: contain;
	pointer-events: none;
}

@media (max-width: 47.9375rem){
	:root{
		--bf-icon-box-size: 2.625rem;
		--bf-icon-size: 1rem;
		--bf-panel-height: 2.625rem;
		--bf-panel-width: min(12.5rem, calc(100vw - 2.625rem));
	}
}

@media (prefers-reduced-motion: reduce){
	.bf-contact-panel,
	.bf-contact-toggle{
		transition: none;
	}
}