$menu-item-font-size: $eps-font-size-caption;
$menu-item-line-height: $eps-line-height-sm;
$menu-item-link-spacing: spacing(12);
$menu-item-icon-size: $font-size-18;
$menu-item-padding-block: spacing(8);
$menu-item-padding-inline: spacing(30);
$menu-item-height: spacing(44);
$menu-item-pointer-width: spacing(5);
$menu-item-pointer-color: tints(900);
$menu-item-action-button-padding: spacing(10);
$menu-item-action-button-margin: spacing(20);
$menu-item-action-button-color: tints(300);

$menu-item-active-box-shadow: $eps-box-shadow;
$menu-item-transition: $eps-transition-duration;

$menu-item-color: tints(600);
$menu-item-color-hover: tints(700);
$menu-item-color-active: tints(900);
$menu-item-background-color-hover: tints(25);
$menu-item-background-color-active: tints(75);


:root {
	--menu-item-color: #{$menu-item-color};
	--menu-item-color-hover: #{$menu-item-color-hover};
	--menu-item-color-active: #{$menu-item-color-active};
	--menu-item-background-color-hover: #{$menu-item-background-color-hover};
	--menu-item-background-color-active: #{$menu-item-background-color-active};
	--menu-item-action-button-color: #{$menu-item-action-button-color};
}

$menu-item-dark-color: dark-tints(100);
$menu-item-dark-color-hover: dark-tints(200);
$menu-item-dark-color-active: dark-tints(300);
$menu-item-dark-background-color-hover: dark-tints(750);
$menu-item-dark-background-color-active: dark-tints(725);
$menu-item-action-button-dark-color: dark-tints(400);

.eps-theme-dark {
	--menu-item-color: #{$menu-item-dark-color};
	--menu-item-color-hover: #{$menu-item-dark-color-hover};
	--menu-item-color-active: #{$menu-item-dark-color-active};
	--menu-item-background-color-hover: #{$menu-item-dark-background-color-hover};
	--menu-item-background-color-active: #{$menu-item-dark-background-color-active};
	--menu-item-action-button-color: #{$menu-item-action-button-dark-color};
}

.#{$eps-prefix}menu-item {
	display: flex;
	align-items: center;
	position: relative;
	transition: $menu-item-transition;
	--action-button-opacity: 0;

	&::before {
		content: '';
		display: block;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		height: 100%;
		width: var(--menu-item-pointer-width);
		background-color: $menu-item-pointer-color;
	}

	&:hover:not(.eps-menu-item--active) {
		background-color: var(--menu-item-background-color-hover);
		--action-button-opacity: 1;
		--menu-item-color: var(--menu-item-color-hover);
		--eps-link-color: var(--menu-item-color-hover);
	}

	&--active {
		background-color: var(--menu-item-background-color-active);
		--menu-item-color: var(--menu-item-color-active);
		--eps-link-color: var(--menu-item-color-active);
	}

	&__link {
		padding: $menu-item-padding-block $menu-item-padding-inline;
		min-height: $menu-item-height;
		font-size: $menu-item-font-size;
		line-height: $menu-item-line-height;
		flex-grow: 1;
		display: flex;
		align-items: center;
		color: var(--menu-item-color);
		--eps-link-color: var(--menu-item-color);

		&:not(:last-child) {
			padding-inline-end: 0;
		}

		.eps-icon {
			font-size: $menu-item-icon-size;
			margin-inline-end: $menu-item-link-spacing;
		}
	}

	&__action-button {
		opacity: var(--action-button-opacity);
		padding: $menu-item-action-button-padding;
		transition: $menu-item-transition;
		margin-inline-end: $menu-item-action-button-margin;
	}

	&--active {
		--menu-item-pointer-width: #{$menu-item-pointer-width};
	}
}
