.abc-vertical-menu {
	--abc-vm-transition: 280ms;
	--abc-vm-main-width: 50%;
	--abc-vm-sub-width: 50%;
	position: relative;
	width: 100%;
}

.abc-vertical-menu--empty {
	padding: 0.75rem 1rem;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	color: #6b7280;
	font-size: 0.9rem;
}

.abc-vertical-menu__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	transition: height var(--abc-vm-transition) ease;
}

.abc-vertical-menu__track {
	display: grid;
	grid-template-columns: var(--abc-vm-main-width) 0fr;
	align-items: start;
	width: 100%;
	min-height: 100%;
	transition: grid-template-columns var(--abc-vm-transition) ease;
}

.abc-vertical-menu.is-sub-open .abc-vertical-menu__track {
	grid-template-columns: var(--abc-vm-main-width) var(--abc-vm-sub-width);
}

.abc-vertical-menu__panel {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

.abc-vertical-menu__panel--main {
	grid-column: 1;
}

.abc-vertical-menu__panel--sub {
	grid-column: 2;
	display: none;
	overflow: hidden;
	flex-direction: column;
	align-items: stretch;
}

.abc-vertical-menu.is-sub-open .abc-vertical-menu__panel--sub {
	display: flex;
}

.abc-vertical-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.abc-vertical-menu__item {
	margin: 0;
	padding: 0;
}

.abc-vertical-menu__item--active > .abc-vertical-menu__item-inner {
	font-weight: 600;
}

.abc-vertical-menu__item-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
}

.abc-vertical-menu__link {
	display: block;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.abc-vertical-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	box-sizing: border-box;
}

.abc-vertical-menu__sub-header {
	display: block;
	flex-shrink: 0;
	margin-bottom: 0.5rem;
}

.abc-vertical-menu__parent-link {
	text-decoration: none;
	color: inherit;
	font-weight: 600;
}

.abc-vertical-menu--has-prefix .abc-vertical-menu__parent-link::before {
	content: var(--abc-vm-title-prefix);
	font: inherit;
	color: inherit;
}

.abc-vertical-menu__list--sub {
	flex: 1 1 auto;
	justify-content: flex-start;
	align-content: flex-start;
	min-height: 0;
	overflow: auto;
}

/* Side-by-side panel animations */
.abc-vertical-menu--animation-fade .abc-vertical-menu__panel--sub {
	opacity: 0;
	transition: opacity var(--abc-vm-transition) ease;
}

.abc-vertical-menu--animation-fade.is-sub-open .abc-vertical-menu__panel--sub {
	opacity: 1;
}

.abc-vertical-menu--animation-fade-left .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-fade-right .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-left .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-right .abc-vertical-menu__panel--sub {
	opacity: 0;
	transition: transform var(--abc-vm-transition) ease, opacity var(--abc-vm-transition) ease;
}

.abc-vertical-menu--animation-fade-left.is-sub-open .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-left.is-sub-open .abc-vertical-menu__panel--sub {
	opacity: 1;
	transform: translateX(0);
}

.abc-vertical-menu--animation-fade-right.is-sub-open .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-right.is-sub-open .abc-vertical-menu__panel--sub {
	opacity: 1;
	transform: translateX(0);
}

.abc-vertical-menu--animation-fade-left .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-left .abc-vertical-menu__panel--sub {
	transform: translateX(24px);
}

.abc-vertical-menu--animation-fade-right .abc-vertical-menu__panel--sub,
.abc-vertical-menu--animation-slide-right .abc-vertical-menu__panel--sub {
	transform: translateX(-24px);
}

.abc-vertical-menu--trigger-hover .abc-vertical-menu__item--has-children:hover > .abc-vertical-menu__item-inner .abc-vertical-menu__link,
.abc-vertical-menu--trigger-hover .abc-vertical-menu__item--has-children:focus-within > .abc-vertical-menu__item-inner .abc-vertical-menu__link {
	text-decoration: none;
}

.abc-vertical-menu--target-item.abc-vertical-menu--trigger-click .abc-vertical-menu__item--has-children .abc-vertical-menu__link {
	cursor: pointer;
}