.Menu {
  background: $grey-100;
  border-radius: 6px;
  display: none;
  min-width: 220px;
  position: absolute;
  top: $unit * 5; // This shouldn't be hardcoded. How to calculate it?
  z-index: 10;
}

.MenuItem {
  color: $grey-40;
  font-weight: $normal;

  &:hover:not(.disabled) {
    background: $grey-95;
    color: $grey-10;
    cursor: pointer;

    a {
      color: $grey-10;
    }
  }

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

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

    span {
      flex-grow: 1;
    }

    .Switch {
      $height: 24px;

      background: $grey-60;
      border-radius: calc($height / 2);
      border: none;
      position: relative;
      width: 44px;
      height: $height;

      &:hover {
        cursor: pointer;
      }

      .Thumb {
        $diameter: 18px;

        background: $grey-100;
        border-radius: calc($diameter / 2);
        display: block;
        height: $diameter;
        width: $diameter;
        transition: transform 100ms;
        transform: translateX(-2px);
        z-index: 3;

        &:hover {
          cursor: pointer;
        }

        &[data-state='checked'] {
          background: $grey-100;
          transform: translateX(17px);
        }
      }

      .left,
      .right {
        color: $grey-100;
        font-size: 10px;
        font-weight: $bold;
        position: absolute;
        z-index: 2;
      }

      .left {
        top: 6px;
        left: 6px;
      }

      .right {
        top: 6px;
        right: 5px;
      }
    }
  }

  a {
    color: $grey-40;
  }

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

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

    &:hover {
      i.tag {
        background: $grey-60;
        color: $grey-100;
      }
    }

    span {
      flex-grow: 1;
    }

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

.MenuGroup {
  border-bottom: 1px solid #f5f5f5;

  &:first-child .MenuItem:first-child:hover {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  &:last-child .MenuItem:last-child:hover {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  &:last-child {
    border-bottom: none;
  }
}