[data-nav-item] {
  border-radius: 10rem !important;
  color: var(--bg-color);
  background: var(--main-color);
}

[data-nav-item]:hover {
  filter: brightness(1.25);
}

header[data-focused] [data-nav-item="test"] {
  --nav-focus-opacity: 1;
  background: #e34c6c;
}

[data-nav-item="alerts"],
[data-ui-element="navAvatar"] {
  & [data-ui-element="notificationBubble"] {
    box-shadow: none;
    background: var(--bg-color);
  }
}

[data-ui-element="userLevel"] {
  background: var(--color-bg);
  color: var(--main-color);
}

body.crtmode {
  & [data-nav-item] {
    box-shadow:
      3px 0 1px var(--crt-main-color-glow),
      -3px 0 var(--crt-main-color-glow),
      0 0 3px;
  }

  & header[data-focused] [data-nav-item],
  & [data-nav-item]:hover {
    box-shadow: none;
  }

  & header[data-focused] [data-nav-item="test"] {
    box-shadow:
      3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
      -3px 0 color-mix(in srgb, #e34c6c 30%, transparent),
      0 0 3px;
  }
}