$header-bg: scale-color($primary-color, $lightness: -40%);

.m-header {
  background-color: $header-bg;
  color: $white;
  margin-bottom: rem-calc(15);
  padding: rem-calc(15 20 15);
  @media #{$medium-up} {
    padding: rem-calc(15 40 0);
  }
  p {
    color: $white;
    text-shadow: $text-shadow;
  }

  a {
    color: rgba($white, 0.6);
    border-bottom: 4px solid $header-bg;
    &:hover {
      color: $white;
    }

    &.is-active {
      border-color: $white;
    }
  }
}

.m-header--title {
  color: $white;
  text-shadow: $text-shadow;
}

.m-header--nav {
  display: flex;
  margin: auto;
  flex-direction: column;

  &.is-away {
    display: none;
    text-align: left;
    @media #{$medium}{
      text-align: center;
      display: flex;
      flex-direction: row;
    }
  }

  &.is-on-viewport {
    display: flex;
  }

  a {
    display: block;
    padding: rem-calc(20 0);
    flex: 1;
  }
}

.index {
  .l-download {
    outline: 2px solid $white;
  }
}

a.m-header--menu {
  padding: rem-calc(10 20);
  margin-bottom: rem-calc(10);
  display: block;
  float: right;
  border: 2px solid $white;
  z-index: 1000;
  position: fixed;
  bottom: rem-calc(10);
  background-color: $header-bg;
  @media #{$medium-up} {
    display: none;
  }
}
