.bahamut {
  $negative-margin: $unit * -2;

  align-items: center;
  background: #2b4683;
  box-sizing: border-box;
  display: flex;
  gap: $unit;
  justify-content: center;
  text-align: center;
  font-weight: $bold;
  padding: $unit-2x;
  margin-top: $negative-margin;
  margin-left: $negative-margin;
  margin-right: $negative-margin;
  margin-bottom: $unit-2x;
  width: 100vw;

  p {
    color: white;
  }

  svg {
    width: 1.2em;
    fill: white;
  }
}

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