@value ( colorFillPrimary,
  colorFillInversePrimary,
  colorNeutralDarkest,
  colorTextInverseSecondary,
  colorTextInversePrimary,
  colorSideMenuIconDefault,
  colorSideMenuIconActive ) from '../../styles/variables/_color.css';
@value ( spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
@value ( size42, sizeFluid) from '../../styles/variables/_size.css';
@value ( borderRadiusSmall) from '../../styles/variables/_border.css';

.linkWrapper {
  display: flex;
  background: colorFillInversePrimary;
  color: colorTextInverseSecondary;
  flex-direction: row;
  gap: spaceXSmall;
  justify-content: flex-start;
  align-items: center;
  flex: auto;
  height: size42;
  min-width: size42;
  border-radius: borderRadiusSmall;
  width: sizeFluid;
  cursor: pointer;
  user-select: none;
}

.linkWrapper.closed {
  width: size42;
}

.linkWrapper:not(.selected):hover {
  background: colorNeutralDarkest;
  color: colorTextInversePrimary;
}

.menuIcon {
  height: size42;
  width: size42;
  color: colorSideMenuIconDefault;
}

.linkWrapper.selected {
  background: colorFillPrimary;
  color: colorTextInversePrimary;
}

.linkWrapper.selected .menuIcon {
  color: colorSideMenuIconActive;
}

.linkWrapper:hover .menuIcon {
  color: colorSideMenuIconActive;
}

.menuText {
  color: inherit;
  margin-right: spaceSmall;
}