@use "../variables.scss";
@use "../mixins.scss";

#header {
  // Height is set in main.scss
  background: variables.$clr_header;
  padding: 0 variables.$px_headerPadding;
  position: sticky;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  @include mixins.header_overflow2 {
    padding: 0 variables.$px_headerPadding2;
  }

  #logo {
    height: 56px;

    @include mixins.header_overflow2 {
      height: 36px;
    }
  }

  .navbar {
    display: flex;

    .nav-item {
      margin-right: 1vw;
      font: 18px "Montserrat", sans-serif;
      font-weight: 600;
      color: variables.$clr_nav_sleep;
      text-decoration: none;

      &:hover {
        color: variables.$clr_nav_active;
      }

      &:last-of-type {
        margin-right: 0;
      }

      @include mixins.header_overflow {
        display: none;
      }
    }
  }

  .menu {
    display: none;
    filter: invert(1);
    height: 56px;
    width: auto;

    img {
      height: 56px;
      width: auto;
    }

    @include mixins.header_overflow2 {
      img {
        height: 36px;
      }
      height: 36px;
    }

    @include mixins.header_overflow {
      display: block;
    }
  }
}