[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"] {
			position: relative;

			span:not([data-items="0"]) {
				position: absolute;
				border-radius: 50%;
				width: 15px;
				height: 15px;
				background: var(--color-primary);
				top: 0px;
				right: -9px;
				display: grid;
				place-items: center;
				line-height: 1em;

				&::after {
					content: attr(data-items);
					font-size: 10px;
					color: var(--color-primary-content);
				}
			}
		}
	}
}

: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;		
		}
	}
}