/* ══════════════════════════════════════════════════ *
 * MARK: Toolbar - Aside
 * ────────────────────────────────────────────────── */
.cvh--toolbar-aside {
	--_toolbar--background: var(--secondary);
	--_toolbar__button--gap: 1rem;
	--_toolbar__button--offset: var(--cvh-space-xs, 1.5rem);
	--_toolbar__button__overlay--size: 250px;

	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 800;
	background-color: var(--_toolbar--background);
	padding: 5px;

	& > ul {
		display: flex;
		flex-direction: column;
		gap: var(--_toolbar__button--gap);

		& > li {
			position: relative;
			isolation: isolate;
			margin: 0;

			&::before {
				content: unset;
			}

			&:not(:last-child)::after {
				content: '\0A';
				display: block;
				position: absolute;
				bottom: calc(var(--_toolbar__button--gap) * -0.5);
				inset-inline: 0;
				height: var(--cvh-border-width);
				background-color: #fff;
				translate: 0 50%;
			}

			& > .cvh--toolbar-aside__button {
				position: relative;
				isolation: isolate;
				aspect-ratio: 1 / 1;
				padding: 1rem;
				color: #fff;

				& > span[data-element="text"] {
					display: inline-block;
					position: absolute;
					right: calc(100% + var(--_toolbar__button--offset));
					z-index: 5;
					width: max-content;
					max-width: var(--_toolbar__button__overlay--size);
					background-color: var(--_toolbar--background);
					padding: 0.5rem 1rem;
					border-radius: 3px;
				}

				&:not(:hover, :focus-visible) > span[data-element="text"] {
					display: none;
				}

				& > span[data-element="icon"] {
					font-size: var(--text-l);
					line-height: 0;

					& > svg {
						width: 1em;
						height: 1em;
					}
				}
			}
		}
	}
}