$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-y: spacing(8);
$menu-item-padding-x: spacing(30);
$menu-item-height: spacing(44);
$menu-item-pointer-width: spacing(5);
$menu-item-pointer-color: theme-elements-colors(link-color);
$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-background-color-active: theme-colors(light);
$menu-item-icon-color: tints(500);
:root {
--menu-item-color: #{$menu-item-color};
--menu-item-color-hover: #{$menu-item-color-hover};
--menu-item-background-color-active: #{$menu-item-background-color-active};
--menu-item-icon-color: #{$menu-item-icon-color};
--menu-item-action-button-color: #{$menu-item-action-button-color};
}
$menu-item-dark-color: dark-tints(100);
$menu-item-dark-color-hover: dark-tints(100);
$menu-item-dark-background-color-active: dark-tints(600);
$menu-item-icon-dark-color: dark-tints(200);
$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-background-color-active: #{$menu-item-dark-background-color-active};
--menu-item-icon-color: #{$menu-item-icon-dark-color};
--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;
top: 0;
inset-inline-start: 0;
height: 100%;
width: var(--menu-item-pointer-width);
background-color: $menu-item-pointer-color;
}
&:hover {
--action-button-opacity: 1;
}
&:hover, &--active {
--menu-item-color: var(--menu-item-color-hover);
--eps-link-color: var(--menu-item-color-hover);
--menu-item-icon-color: #{$menu-item-pointer-color};
}
&--active {
background-color: var(--menu-item-background-color-active);
}
&__link {
padding: $menu-item-padding-y $menu-item-padding-x;
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;
color: var(--menu-item-icon-color);
margin-inline-end: $menu-item-link-spacing;
}
}
&__action-button {
color: var(--menu-item-action-button-color);
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};
box-shadow: $menu-item-active-box-shadow;
.#{$eps-prefix}menu-item__link .eps-icon {
color: $menu-item-pointer-color;
}
}
}