.menu-item {
  color: var(--text);
  display: block;
  padding: 0.5rem 1rem;
  width: 100%; // for buttons

  &--active {
    position: relative;

    &::before {
      content: '\2022'; // bullet
      left: 0;
      position: absolute;
      text-align: center;
      width: 1rem;
    }
  }

  &:any-link,
  &:is(input[type="submit"]),
  &:is(input[type="reset"]),
  &:is(input[type="button"]),
  &:is(button) {
    &:not(:disabled):hover {
      background-color: var(--accent);
      color: var(--accent-fg);
      text-decoration: none;
    }
  }

  &:focus-visible {
    background-color: var(--accent-alt);
    outline: none;
  }
}