@use "../mixins" as *;

.menu-flyout-item {
	@include flex($align: center);
	@include typography-body;

	inline-size: calc(100% - 8px);
	position: relative;
	box-sizing: border-box;
	flex: 0 0 auto;
	// overflow: hidden;
	margin: 2px 4px;
	padding-inline: 12px;
	border-radius: var(--control-corner-radius);
	outline: none;
	background-color: var(--subtle-fill-transparent);
	color: var(--text-primary);
	text-decoration: none;
	cursor: default;
	user-select: none;
	min-block-size: 28px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;

	&::before {
		content: "";
		position: absolute;
		border-radius: 3px;
		background-color: var(--accent-default);
		transition: transform var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
		opacity: 0;
		inset-inline-start: 0;
		inline-size: 3px;
		block-size: 0;
	}

	&:focus-visible {
		box-shadow: var(--focus-stroke);
	}

	&:hover,
	&[aria-expanded="true"],
	&.selected {
		background-color: var(--subtle-fill-secondary);
	}

	&.checked {
		:global {
			.menu-flyout-item- {
				&bullet,
				&checkmark {
					visibility: visible;
				}
			}
		}
	}

	&:active {
		background-color: var(--subtle-fill-tertiary);

		&::before {
			transform: scaleY(0.625);
		}
	}

	&.disabled {
		background-color: var(--subtle-fill-transparent);
		color: var(--text-disabled);
		pointer-events: none;
		&.selected {
			background-color: var(--subtle-fill-secondary);
			&::before {
				background-color: var(--accent-disabled);
			}
		}
		> :global(.menu-flyout-item-hint) {
			color: var(--text-disabled);
		}
	}

	&.selected::before {
		opacity: 1;
		block-size: 16px;
	}

	&.indented {
		padding-inline-start: 40px;
	}

	&-checkmark,
	&-bullet {
		visibility: hidden;
	}

	& &-arrow {
		box-sizing: content-box;
		inline-size: 12px;
		block-size: 12px;
		margin-inline-end: 0;
		margin-inline-start: auto;
		padding-inline-start: 24px;
	}

	&-checkmark {
		@include flex($align: center, $justify: center);
		inline-size: 12px;
		block-size: 12px;
		margin-inline-start: 2px;
		margin-inline-end: 14px;
	}

	&-bullet {
		inline-size: 4px;
		block-size: 4px;
		border-radius: 4px;
		margin-inline-start: 6px;
		margin-inline-end: 18px;
		background-color: currentColor;
	}

	&-input-label {
		display: contents;
	}

	> :global(svg) {
		@include icon($size: 16px);
		margin-inline-end: 12px;
	}

	> :global(.menu-flyout-item-hint) {
		flex: 1 1 auto;
		text-align: end;
		padding-left: 24px;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--text-secondary);
	}
}

.menu-flyout-submenu-anchor {
	z-index: 10000;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 100%;
}