.bahamut {
  background: #2b4683;
  color: white;
  text-align: center;
  font-weight: $bold;
  padding: $unit;
  border-radius: $full-corner;
  margin-bottom: $unit;
  width: 100%;
}

.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 {
      .Button {
        background: var(--button-bg-hover);
        color: var(--button-text-hover);
      }
    }
  }

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