frontend/marko/components/menu-link/style.less

div.menu-link {
  width: 100%;
  padding-left: 0.5ch;
  font-size: 1.1em;
  padding-bottom: 0.125em;

  white-space: nowrap;

  cursor: pointer;

  div.icon {
    display: inline-block;
    width: 3ch;
    padding: 0 0.125em;
    text-align: center;
    vertical-align: middle;
  }

  div.text {
    display: inline-block;
    max-width: 22ch;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;

    span.weak {
      opacity: 0.3333;
    }
  }
}
div.menu-link:hover {
  div.text {
    span.weak {
      opacity: 0.75;
    }
  }
}
div.menu-link.dark {
  opacity: 0.5;
}
div.menu-link.dark:hover {
  opacity: 1;
}