hensei-web/components/HeaderMenu/index.scss

.Menu {
  background: var(--menu-bg);
  border-radius: 6px;
  box-sizing: border-box;
  display: none;
  min-width: 220px;
  position: absolute;
  top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
  // Also, add space that doesn't make the menu disappear if you move your mouse slowly
  z-index: 10;

  @include breakpoint(phone) {
    left: $unit-2x;
    right: $unit-2x;
  }
}

.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;
    }

    .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;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 3;

        &:hover {
          cursor: pointer;
        }

        &[data-state='checked'] {
          background: $grey-100;
          left: 23px;
        }
      }

      .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-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;
    }
  }
}

.MenuGroup {
  border-bottom: 1px solid var(--menu-separator);

  &: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;
  }
}