/* BEGIN: FIXED BUTTONS ///////////////////////////////////////////////////// */

.button.fixed {

	background-color: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: var( --gap-big );
	position: fixed;
	z-index: 2;

}

		.button.fixed > .icon {

			background-color: var( --clr-purple );
			border-color: var( --clr-white );

		}

			.button.fixed > .icon > svg > path {

				fill: var( --clr-white );

			}

#button-fixed-menu {

	left: 0;
	top: 0;
	z-index: 4;

}

#button-fixed-menu > .icon {

/* 	border-color: var( --clr-white ); */
	transform: scaleY( 1 );
	transition:
/* 		background-color var( --anim-short-dur ) ease-in-out, */
		transform var( --anim-short-dur ) ease-in-out;
	will-change: transform;

}

#button-fixed-menu.on > .icon {

/* 	background-color: var( --clr-green ); */
	transform: scaleY( -1 );

}

	#button-fixed-menu-label {

		color: var( --clr-blue );
		display: none;
		font-weight: var( --fw-subtitle );
		margin-top: var( --gap-smaller );

	}

#button-fixed-forward {

	bottom: 0;
	right: 0;
}

#button-fixed-backward {

	bottom:  calc( var( --fbs ) + var( --gap-smaller ) );
	right: 0;

}

#button-fixed-forward,
#button-fixed-backward {

	opacity: 1;
	transition: opacity var( --anim-short-dur ) ease-in-out;

}

#button-fixed-forward.off,
#button-fixed-backward.off {

	opacity: 0.5;
	cursor: default;

}

@media ( min-width: 640px ) {

	#button-fixed-menu-label {

		display: block;

	}

}

/* END: FIXED BUTTONS /////////////////////////////////////////////////////// */