.floatingbuttons{
	--icon: 64px;

	list-style: none;
	overflow: hidden;
	position: fixed;
	z-index: 800;
	top: 33.33%;
	transform: translateY(-50%);
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin: 0;
	padding: 0;

	li{
		max-width: var(--icon);
		background: #572966;
		transition: max-width .3s ease;

		&:hover{
			max-width: 250px;
		}

		a{
			display: flex;
			align-items: center;
			text-decoration: none;

			.icon{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--icon);
				aspect-ratio: 1;
				background: #672D7B;
			}

			.text{
				padding: 12px 24px;
				font-size: 14px;
				font-weight: 700;
				letter-spacing: 0.02em;
				color: #fff;
				text-transform: uppercase;
				white-space: nowrap;
				word-break: keep-all;
				overflow-wrap: normal;
			}
		}
	}
}

@media (max-width: 767px){
	.floatingbuttons{
		overflow: hidden;
		top: auto;
		bottom: 0;
		transform: none;
		left: 0;
		flex-direction: row;

		li{
			transform: translateY(100%);
			transition: transform .3s ease;
			flex: 1 0 0%;
			max-width: none;

			&:hover{
				max-width: none;
			}

			a{
				justify-content: center;
				padding: 0;

				.icon{
					width: 100%;
					height: var(--icon);
					aspect-ratio: none;
				}

				.text{
					display: none;
				}
			}
		}
	}
	.menu-open:not(.menu-opening):not(.menu-closing) .floatingbuttons li{
		transform: translateY(0%);
	}
}