.floatingbuttons{
	--icon: 64px;

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

	@media (max-width: 767px){
		display: none;
		--icon: 55px;
	}

	li{
		max-width: var(--icon);
		background: #fff;
		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: var(--wp--preset--color--rot);

				img{
					width: 30px;
					height: 30px;
					object-fit: contain;
				}
			}

			.text{
				padding: 12px 24px;
				font-size: 20px;
				font-weight: 700;
				line-height: 1.4;
				color: var(--wp--preset--color--rot);
				white-space: nowrap;
				word-break: keep-all;
				overflow-wrap: normal;
			}
		}
	}
}