@use "sass:math";
@import "../../../css/boxes";
@import "../../../css/ui-constants";

#ame-nav-menu-visibility-editor {
	margin-top: $largeActorSelectorToUiGap; //A little extra space between the actor list and the menu UI.
}

#ame-nv-navigation-menu-list {
	font-size: 14px;
	max-width: 630px;
}

$itemLeftPaddingBuffer: 2px;

.ame-nv-navigation-menu {
	$horizontalPadding: 12px;

	@include ame-emulated-postbox(null, $horizontalPadding);

	.ws-ame-postbox-content {
		padding-top: 8px;
		padding-left: $horizontalPadding - $itemLeftPaddingBuffer;
	}
}

.ame-nv-nav-item-title {
	line-height: math.div(23, 14);

	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	//Leave space for the checkbox focus outline that would otherwise be cut off
	//by the "overflow: hidden".
	padding-left: $itemLeftPaddingBuffer;
}

.ame-nv-nav-item-title-text {
	text-wrap: nowrap;

}

.ame-nv-nav-item-children {
	padding-left: 1.7em;
}

.ame-nv-hidden > .ame-nv-nav-item-title {
	color: $ameUiTextMutedColor;
}

//region Locked checkbox
input[type="checkbox"].ame-nv-locked-checkbox {
	&:before {
		display: block;
		font-family: 'dashicons', sans-serif;
		content: '\f160';
		color: #3c434a; //#D81536;

		line-height: 1rem;
		font-size: 1.125rem;
	}

	&:disabled, &:disabled:before {
		opacity: 0.9;
	}
}

@media screen and (min-width: 783px) {
	input[type="checkbox"].ame-nv-locked-checkbox {
		border-color: transparent;
		box-shadow: none;
		background: transparent;

		&:before {
			line-height: 1rem;
			font-size: 1.25rem;

			height: 1.3125rem;
			width: 1.3125rem;

			margin-left: -1rem * 3/16;
			margin-top: -1rem * 2/16;
		}
	}
}

//WordPress makes checkboxes bigger on small screens, so we need to adjust the
//size and position of the lock icon.
@media screen and (max-width: 782px) {
	input[type="checkbox"].ame-nv-locked-checkbox {
		&:before {
			line-height: 1.875rem;
			font-size: 1.375rem;

			width: 1.875rem;
			height: 1.875rem;

			margin-left: -1rem * 3/16;
			margin-top: inherit;
		}
	}
}

//endregion