#Header {
  display: flex;
  flex-direction: row;
  margin-bottom: $unit;
  justify-content: space-between;
  width: 100%;

  section {
    display: flex;
    gap: $unit;
  }

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

  .placeholder {
    background: var(--placeholder-bg);
  }

  #DropdownWrapper {
    display: inline-block;
    padding-bottom: $unit;

    &:hover .Menu,
    .Menu.open {
      display: block;
    }

    &:hover {
      // padding-right: $unit-4x;

      .Button {
        background: var(--button-bg-hover);
        color: var(--button-text-hover);
      }
    }
  }

  @include breakpoint(phone) {
    .Button .Text {
      display: none;
    }
  }
}