[data-id="user-toolbar"] {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--color-base-100);
	outline: 1px solid var(--outline-color);
	padding-block: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	animation-name: animate-fade-in;
	animation-duration: 800ms;
	animation-fill-mode: both;
	animation-delay: 1s;

	& > span {
		display: inline-block;
		width: 24px;
		height: 24px;
		cursor: pointer;

		svg {			
			transform: scale(var(--scale, 1));
			pointer-events: none;
		}

		&[data-cmd="view-cart"] {
			cursor: pointer;
			position: relative;
			display: none;

			&[data-items]::before {
				content: attr(data-items);
				font-size: 10px;
				display: inline-block;
				place-items: center;
				position: absolute;
				background-color: red;
				color: #fff;
				line-height: 16px;
				width: 16px;
				aspect-ratio: 1;
				top: -2px;
				right: -7px;
				z-index: 1;
				border-radius: 50%;
				text-align: center;
			}			
		}
	}
}

:root.navbar-is-hidden {
	[data-id="user-toolbar"] {
		& > span {
			&[data-cmd="view-cart"] {
				display: inline-block;
			}	
		}	
	}	
}

:root {
	&.mobile-menu-is-open {
		[data-id="user-toolbar"] {
			animation-name: animate-fade-out;
			animation-duration: 800ms;
			animation-fill-mode: both;
			animation-delay: 0s;	
			pointer-events: none;		
		}
	}
}

@media screen and (width <= 576px) {
	[data-id="user-toolbar"] {
		& > span {
			width: 32px;
			height: 32px;
		}
	}	
}