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

#header {
  background: variables.$clr_header;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  @include mixins.navbar_overflow {
    flex-direction: column;
  }

  #logo {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    margin-left: variables.$innerContainerMargin;
    color: variables.$clr_logo
  }

  .navbar {
    display: flex;

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

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

      @include mixins.navbar_overflow {
        &:last-of-type {
          margin-right: 0;
        }
      }

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

  .menu {
    display: none;
    margin-right: variables.$innerContainerMargin;

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