@import "../../../src/scss/init";

:root {
  --header-height-mobile: 5rem;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--header-height-mobile);
  z-index: 100;

  &__content-column {
    display: flex;
    align-items: center;

    &--left {
      .navbar-brand {
        max-width: 12rem;

        @include media-breakpoint-up(md) {
          max-width: 15rem;
        }

        @include media-breakpoint-up(lg) {
          max-width: 20rem;
        }

        &__logo {
          padding: 0.5rem;
          max-height: 4rem;

          img {
            max-height: 3rem;
          }
        }
      }
    }

    &--right {
      display: flex;
      justify-content: end;
    }

    .navigation-desktop {
      display: none;

      @include media-breakpoint-up(lg) {
        display: block;
      }
    }

    .navigation-mobile {
      @include media-breakpoint-up(lg) {
        display: none;
      }
    }

    .hamburger {
      @include media-breakpoint-up(lg) {
        display: none;
      }
    }
  }
}
