.header {
  align-content: center;
  background-color: color("white");
  display: flex;
  justify-content: space-between;
  min-height: $header-height;
  padding-left: $row-margin;
  padding-right: $row-margin;
  z-index: 1;

  &__logo {
    align-self: center;
    display: block;
    z-index: 2;
  }

  &__logo-image {
    align-self: center;
    height: 36px;
  }

  &__navigation {
    background-color: color("white");
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 100%;
    list-style: none;
    margin-top: $header-height;
    overflow-y: scroll;
    position: absolute;
    transition: left .3s ease;
    width: 100%;
    z-index: 1;

    .header__logo {
      display: none;
    }
  }

  &__secondary-navigation,
  &__main-navigation,
  &__mobile-navigation {
    display: block;
    margin: 0;
    padding: 0;
  }

  &__mobile-navigation {
    z-index: 2;

    .header__navigation-item {
      display: inline-block;
    }
  }

  &__navigation-item {
    display: block;
    float: none;

    a,
    .header__menu-button {
      display: block;
      font-size: 20px;
      padding: 23px 12px 20px;
      text-decoration: none;
    }

  }

  &__search {
    color: theme-color("charcoal");

    &:hover,
    &:focus {
      color: theme-color("blue");
    }
  }

  &__link {
    background-color: transparent;
    border-left-style: solid;
    border-left-width: 4px;
    color: theme-color("charcoal");
    transition: background-color .4s ease;

    &--green {
      border-color: theme-color("green-accessible");

      &:hover {
        background-color: theme-color("green-accessible");
        color: color("white");
      }
    }

    &--red  {
      border-color: theme-color("red");

      &:hover {
        background-color: theme-color("red");
        color: color("white");
      }
    }

    &--purple  {
      border-color: theme-color("purple");

      &:hover {
        background-color: theme-color("purple");
        border-color: theme-color("purple");
        color: color("white");
      }
    }

    &--pink  {
      border-color: theme-color("pink-accessible");

      &:hover {
        background-color: theme-color("pink-accessible");
        color: color("white");
      }
    }

    &--blue {
      border-color: theme-color("blue");

      &:hover {
        background-color: theme-color("blue");
        color: color("white");
      }
    }
  }

  &__menu-button {
    background-color: transparent;
    border: none;
    color: theme-color("charcoal");
    margin: 0;

    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      color: theme-color("charcoal");
      outline: none;
    }
  }

  &__mobile-menu,
  &__navigation-item--search {
    height: 100%;

    .and-icon-search,
    .and-icon-menu {
      vertical-align: middle;
    }
  }

  &--empty {
    padding-bottom: 12px;
    padding-top: 12px;
  }
}

.red-theme,
.blue-theme,
.pink-theme,
.yellow-theme,
.purple-theme,
.green-theme {
  .header__link,
  .header__search {
    color: theme-color("charcoal");
  }
}

.mobile-menu-show {
  overflow: hidden;

  .header__navigation {
    left: 0;
  }

  .and-icon-menu {
    &::before {
      content: "\e943";
    }
  }
}

@include tablet {
  .header {
    position: relative;

    &__logo {
      display: none;
    }

    &__secondary-navigation {
      display: block;
    }

    &__mobile-navigation {
      display: none;
    }

    &__navigation {
      align-self: center;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      left: initial;
      margin: 0;
      padding-top: 0;
      position: relative;

      .header__logo {
        display: block;
      }
    }

    &__navigation-item {
      display: inline-block;
      float: left;
    }

    %green-hover {
      background-color: transparent;
      border-color: theme-color("green-accessible");
      color: theme-color("green-accessible");
    }

    %red-hover {
      background-color: transparent;
      border-color: theme-color("red");
      color: theme-color("red");
    }

    %purple-hover {
      background-color: transparent;
      border-color: theme-color("purple");
      color: theme-color("purple");
    }

    %pink-hover {
      background-color: transparent;
      border-color: theme-color("pink-accessible");
      color: theme-color("pink-accessible");
    }

    %blue-hover {
      background-color: transparent;
      border-color: theme-color("blue");
      color: theme-color("blue");
    }

    &__link {
      border-left: none;
      border-top: 4px solid transparent;

      &--green {
        &:hover {
          @extend %green-hover;
        }
      }

      &--red {
        &:hover {
          @extend %red-hover;
        }
      }

      &--purple {
        &:hover {
          @extend %purple-hover;
        }
      }

      &--pink {
        &:hover {
          @extend %pink-hover;
        }
      }

      &--blue {
        &:hover {
          @extend %blue-hover;
        }
      }
    }

    &__navigation-item--active {
      .header__link--green {
        @extend %green-hover;
      }

      .header__link--red {
        @extend %red-hover;
      }

      .header__link--purple {
        @extend %purple-hover;
      }

      .header__link--pink {
        @extend %pink-hover;

        .header__link--blue {
          @extend %blue-hover;
        }
      }
    }
  }
}