.headerContainer {
  border-bottom: 1px solid var(--medium-purple);
  background: var(--faint-gray);
  height: 62px; // Total height of the mobile container based on current UX requirements
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  width: calc(100vw - 40px);
  &.reverse {
    grid-template-columns: 1fr auto;
    .navButton {
      border-left: 1px solid var(--medium-purple);
      border-right: none;
      padding-left: 20px;
      padding-right: 0;
    }
  }
}

.navButton {
  border-right: 1px solid var(--medium-purple);
  padding-right: 20px;
  height: 100%;
}

.hamburgerIcon {
  svg {
    path,
    line {
      stroke: var(--purple);
    }
  }
}