@import "responsive.scss";
@import "variables.scss";
@import "reset.scss";
@import "mixins.scss";

.NavigationBar-wrapper-2-uQp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.NavigationBar-logoLink-1aSBj {
  line-height: 0;
}

.NavigationBar-leftSide-3Xfpr {
  display: flex;
  align-items: center;
  &.NavigationBar-isSearchOpen-2sykQ {
    @include maxMedia(large) {
      display: none;
    }
  }
}

.NavigationBar-links-MMHt2 {
  display: none;
  @include media(large) {
    display: flex;
  }
}

.NavigationBar-mobileLinks-1avsT {
  display: flex;
  @media (min-width: $headerBreakpoint) {
    display: none;
  }
  &.NavigationBar-isSearchOpen-2sykQ {
    @include maxMedia(large) {
      width: 100%;
    }
  }
}

.NavigationBar-rightMobileLinks-Hu_tL {
  display: flex;
}

.NavigationBar-desktopLinks-1IjN7 {
  display: none;
  margin-left: map-get($gutters, large);
  @media (min-width: $headerBreakpoint) {
    display: flex;
  }
}

.NavigationBar-navLink-QoJpu {
  @include responsive-gutter((padding-left, padding-right), 2/3);
  border-left: 1px solid $colorSeparatorDark;
  font-size: 14px;

  &:last-child {
    border-right: 1px solid $colorSeparatorDark;
  }

  a {
    color: inherit;
    text-decoration: none;
    /* stylelint-disable-next-line selector-max-type*/
    &:hover {
      opacity: 0.8;
    }
    /* stylelint-disable-next-line selector-max-type*/
    &:visited {
      color: inherit;
    }
  }
}

.NavigationBar-rightSide-1pebJ {
  display: flex;
  &.NavigationBar-isSearchOpen-2sykQ {
    @include maxMedia(large) {
      width: 100%;
    }
  }
}

.NavigationBar-iconButtonWrapper-2KcIr {
  @include responsive-gutter((margin-left));
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  &.NavigationBar-isSearchOpen-2sykQ {
    @include maxMedia(large) {
      flex-grow: 2;
      margin-left: 0;
    }
  }
}

.NavigationBar-iconButton-1OVmQ {
  @include reset-button;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
}

.NavigationBar-flagIcon--3bnf {
  height: 18px;
}

.NavigationBar-hamburgerIcon-3mD4m,
.NavigationBar-closeIcon-3QYLh {
  width: 18px;
  height: 18px;
}

.NavigationBar-closeIcon-3QYLh {
  path {
    fill: rgba($colorGrey, 0.5);
  }
}

/* Rules so the monolith can style elements */
.NavigationBar-monorepoHeaderLink-12HhD {
}