@import '../../colors.scss';

.header {
  position: fixed;
  width: 100%;
  font-family: 'Vollkorn', serif;
  background: $background-color-primary;
  display: grid;
  grid-template-columns: 35% 30% 35%;
  grid-template-rows: 100%;
  align-items: center;
  color: $text-color-primary;
  border-bottom: 1px solid $border-color-secondary;
  z-index: 1;

  a {
    justify-self: center;
  }

  > a {
    height: 100%;
    display: flex;
    padding: 0 1em;
    border: 1px solid $background-color-primary;
    border-bottom: 1px solid $border-color-secondary;
    transition: background 0.25s, border 0.25s;

    &:hover {
      background: $background-color-secondary;
      border: 1px solid $background-color-secondary;
    }

    h1 {
      font-size: 1.286em;
    }
  }

  .spacing-div, .header-nav {
    width: 25em;
  }

  .header-nav {
    justify-self: end;
    max-width: 20em;
    width: 100%;
  }

  .header-nav, .list {
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    height: 3.5em;
    float: right;

    .list {
      width: 100%;
    }

    .list-item {
      color: $text-color-primary;
      height: 100%;
      display: flex;
      align-items: center;
      place-content: center;
      flex-grow: 1;
      border: 1px solid $background-color-primary;
      transition: background 0.25s, border 0.25s;

      &.selected {
        border-bottom: 0.2em solid $highlight-color-primary;
      }

      &:hover {
        background: $background-color-secondary;
        border-bottom: 1px solid $background-color-secondary;
      }
    }
  }

  .nav-switch {
    .list-item {
      &:hover {
        background: initial;
        color: $text-color-highlight;
        border-bottom: initial;

        &.selected {
          border-bottom: 0.2em solid $highlight-color-secondary;
        }
      }
    }
  }

  .nav-container {
    width: 100%;

    .project-nav {
      position: fixed;
      left: 0;
      margin-top: 5em;
      width: 14em;
      background: $background-color-secondary;
      height: initial;
    }
  }


  .child-container {
    display: flex;
    flex-direction: column;
  }

  .project-nav {
    height: 100%;


    > ul {
      height: 100%;
      background: none;
      padding: 0 1.2em;
      margin: 0;
    }

    li {
      max-width: none;
    }
  }

  .nav-switch {
    width: 100%;
    display: flex;

    button {
      width: 100%;
      height: 100%;
      background: initial;
    }

    ul {
      display: flex;
      height: 2em;
      margin: 0;
      padding: 0 1.2em;
      width: 100%
    }

    .list-item {
      border-bottom: 1px solid $border-color-primary;
      max-width: initial;

      &.selected, &:hover.selected {
        border-bottom: 1px solid $highlight-color-primary;
      }
    }
  }

  @media only screen and (max-width: 800px) {
    height: 2.9em;
    grid-template-columns: 10% 80% 10%;

    .nav-container .project-nav {
      display: none;
    }

    .project-nav {
      ul {
        overflow: scroll;
      }
    }

    .spacing-div, .header-nav {
      width: 5em;
    }

    .spacing-div > nav {
      display: none;
    }

    .hamburger-menu {
      margin-left: 1em;
    }
  }
}