.header {

background-color: $bg-color;
color: $text-color;
position: absolute;
z-index: 4;
width: 100%;
top: 0;
left: 0;
will-change: transform;
transition: transform .3s, background-color 0.5s ease;
transform: translateY(0%);

a {
  display: flex;
  align-items: center;
  border-bottom: 0;

}

&.fix-nav {
  position: fixed;
  background-color: $bg-color;
  transition: transform .3s, background-color 0.5s ease;
  z-index: 5;
}

&.hide-nav {
  transform: translateY(-120%);
  transition: transform .3s;
}

}

.header__logo {

display: flex;
height: 100%;
overflow: hidden;
padding: 19px 0;
margin-right: 1.25rem;
outline: 0;
border-bottom: 0;
color: $heading-color;

&:hover {
  color: $heading-color;
  border-bottom: 0;
}

.header__logo--container {
  width: 58px;

  .logo {
    fill: currentColor;
  }
}

}

.header__inner {

display: flex;
align-items: center;
height: 3.75em;
justify-content: space-between;

}

.header__links {

padding-bottom: .5rem;
display: none;
position: absolute;
top: 3.75em;
left: 0;
width: 100%;
height: auto;
background: $bg-color;

}

.header__link {

color: $text-color;
padding: .938rem 0;
border-top: 1px solid $border;

}

.header__toggle {

display: flex;
flex-direction: column;
justify-content: center;
width: 44px;
height: 100%;
background-color: transparent;
padding-left: 1.25rem;
cursor: pointer;

span {
  display: block;
  position: relative;
  margin-top: 4px;
  background-color: $text-color;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  transition: all 0.2s cubic-bezier(1, 0.13, 0.35, 1.09);

  &:first-child {
    margin-top: 0;
  }
}

&.--open {
  span {

    &:first-child {
      transform: rotate(45deg) translate(4px, 4px);
    }

    &:nth-child(2n) {
      opacity: 0;
    }

    &:last-child {
      transform: rotate(-45deg) translate(4px, -4px);
    }
  }
}

}

.header__overlay {

position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
background-color: rgba(0, 0 , 0, .75);
z-index: 2;
transition: opacity 1s ease 0.1s;

&.--open {
  width: 100%;
  height: 120%;
  opacity: 1;
}

}

@media (min-width: $lg) {

.header__toggle {
  display: none;
  visibility: hidden;
}

.header__links {
  position: static;
  padding: 0;
  display: flex;
  flex-direction: column;
  visibility: visible;
  width: auto;
  height: 100%;
}

.header__links-wrapper {
  display: flex;
  height: 100%;
  padding: 0;
}

.header__link {
  position: relative;
  padding: .938rem 1rem;
  border: 0;
  height: 100%;

  &::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    background: $link-color;
    transition: color 0.2s ease-in-out, transform .2s ease-in-out;
  }

  &:hover {
    color: darken($link-color, 20%);
  }

  &:hover::after,
  :active::after,
  :focus::after {
    transform: scaleX(1);
    color: darken($link-color, 20%);
    transition: transform .2s ease-in-out;
  }
}

}