.ffz--menu-tree {
	position: relative;

	&:focus {
		outline: none;

		&:after {
			position: absolute;
			top: 0; left: 0;
			height: 100%;
			width: 100%;
			content: '';
			pointer-events: none;

			box-shadow: inset 0 0 0 1px var(--ffz-color-accent-8),
				0 0 6px -2px var(--ffz-color-accent-8);
		}
	}

	.active > div,
	.active > div:hover,
	.tw-root--theme-dark & .active > div:hover {
		background-color: var(--color-background-button-primary-hover);
		color: var(--color-text-button-primary);
	}

	div:hover {
		cursor: pointer;
		background-color: var(--color-background-button-text-hover);
	}

	li div {
		font-size: 1.4rem;
		margin-top: 0.5rem;
		padding-left: 0.5rem
	}

	li:first-child div,
	li ul div {
		margin-top: 0rem;
	}

	li ul div {
		font-size: inherit;
	}

	li li div { padding-left: 1rem }
	li li li div { padding-left: 1.5rem }
	li li li li div { padding-left: 2rem }

	.pill {
		font-size: 0.9rem;
	}

	.arrow {
		opacity: 0.3;
		font-size: 1.6rem;
	}
}


.ffz--invisible {
	visibility: hidden;
}