// dropdown
.ct-header-account-dropdown {
	width: 250px;
	color: var(--theme-text-color);
	margin-top: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px));
	padding-block: var(--menu-items-spacing, 10px);
	box-shadow: var(--theme-box-shadow);
	border-radius: var(--theme-border-radius, 2px);
	background-color: var(--dropdown-background-color, var(--theme-palette-color-4));

	--theme-link-initial-color: var(--theme-text-color);
	--theme-icon-color: currentColor;

	&[data-placement='left'] {
		right: var(--theme-submenu-inline-offset, -20px);
	}

	&[data-placement='right'] {
		left: var(--theme-submenu-inline-offset, -20px);
	}

	// drop-down bridge
	&:before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px));
		transform: translateY(-100%);
	}


	// menu item
	.menu-item {
		display: flex;
		align-items: center;

		.ct-menu-link {
			padding: calc(var(--menu-items-spacing, 10px) / 2) var(--menu-items-spacing, 10px);
			margin-inline: var(--menu-items-spacing, 10px);
			border-radius: 4px;
		}

		&:hover > a {
			color: var(--theme-link-hover-color);
		}

		&[class*="current-menu-"] > a {
			color: var(--theme-link-active-color, var(--theme-link-hover-color));
		}
	}

	&[data-dropdown*="boxed"] .menu-item {

		&:hover > a {
			background-color: var(--dropdown-items-background-hover-color);
		}

		&[class*="current-menu-"] > a {
			background-color: var(--dropdown-items-background-active-color, var(--dropdown-items-background-hover-color));
		}
	}


	// submenu
	.sub-menu li {

		&:first-child > .ct-menu-link {
			margin-top: var(--menu-items-spacing, 10px);
		}

		&:last-child > .ct-menu-link {
			margin-bottom: var(--menu-items-spacing, 10px);
		}
	}

	> .menu-item > .sub-menu {
		top: calc(var(--menu-items-spacing, 10px) * -1);
	}


	// user info layer
	.ct-header-account-user-info {

		.ct-menu-link {
			gap: 13px;
			padding: var(--menu-items-spacing, 10px);
		}

		.ct-media-container {
			flex: 0 0 40px;
			max-width: 40px;
			border-radius: 100%;
		}

		span {
			display: flex;
			flex-direction: column;
			word-break: break-word;
		}
	}


	// divider layer
	.ct-header-account-divider {
		margin: 10px 0;
		border-bottom: var(--theme-border);
	}
}