.menuItem {
  color: var(--text-tertiary);
  font-weight: $normal;

  @include breakpoint(phone) {
    cursor: pointer;
  }

  &:hover:not(.disabled) {
    background: var(--menu-bg-item-hover);
    color: var(--text-primary);
    cursor: pointer;

    a {
      color: var(--text-primary);

      &:hover {
        text-decoration: none;
      }

      &:visited {
        color: var(--text-primary);
      }
    }

    @include breakpoint(phone) {
      background: inherit;
      color: inherit;
      cursor: default;

      a {
        color: inherit;
      }
    }
  }

  &.profile > div {
    padding: 6px 12px;
  }

  &.language {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: $unit;
    padding-right: $unit;

    span {
      flex-grow: 1;
    }
  }

  &.destructive {
    color: $error;

    &:hover {
      background: $error;
      color: #fff;
    }
  }
  a {
    color: $grey-50;

    &:hover {
      text-decoration: none;
    }

    &:visited {
      color: $grey-50;
    }
  }

  & > a,
  & > span {
    display: block;
    padding: 12px 12px;
  }

  & > div {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 10px 12px;

    &:hover {
      i.tag {
        background: var(--tag-bg);
        color: var(--tag-text);
      }
    }

    span {
      flex-grow: 1;
    }

    img {
      $diameter: 32px;
      border-radius: calc($diameter / 2);
      height: $diameter;
      width: $diameter;
    }
  }

  & i {
    background: var(--tag-bg);
    color: var(--tag-text);
    border-radius: calc($unit / 2);
    font-size: 10px;
    font-weight: $bold;
    padding: 4px 6px;
    text-transform: uppercase;
  }
}