.header
  +position(fixed, 0 null null 0)
  width: 100%
  min-width: 360px
  height: 8rem
  overflow: hidden
  z-index: 2
  +MQ(XL)
    +position(absolute, 0 null null 0)
    width: 100%
  +MQ(XXL)
    height: 9rem

.header__left,
.header__right
  transition: all 0.3s ease-in-out

.header
  &.split
    background-color: $base-color
    .header__left,
    .header__right
      border-bottom: 1px solid rgba($white, 0.1)
      &.menu-is-visible
        background-color: $base-color
        .header__left,
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
          background-color: rgba($black, 0.1)
      &.inner-is-visible
        background-color: $base-color
        .header__left,
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
  &.full
    background-color: transparent
    .header__left,
    .header__right
      background-color: transparent
      border-bottom: none
    &.menu-is-visible
      background-color: $base-color
      .header__left,
      .header__right
        border-bottom: 1px solid rgba($white, 0.1)
        background-color: transparent
    &.inner-is-visible
      background-color: $base-color
      .header__left,
      .header__right
        border-bottom: 1px solid rgba($white, 0.1)
        background-color: transparent
  +MQ(XL)
    &.split
      background-color: transparent
      .header__left
        border-bottom: 1px solid rgba($white, 0.1)
      .header__right
        background-color: rgba($black, 0.1)
        border-bottom: 1px solid rgba($white, 0.0)
      &.menu-is-visible
        background-color: transparent
        .header__left,
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
          background-color: rgba($black, 0.1)
      &.inner-is-visible
        background-color: transparent
        .header__left
          background-color: rgba($black, 0.1)
          border-bottom: 1px solid rgba($white, 0.0)
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
          background-color: transparent
    &.full
      background-color: transparent
      .header__left,
      .header__right
        background-color: transparent
        border-bottom: none
      &.menu-is-visible
        background-color: transparent
        .header__left,
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
          background-color: transparent
      &.inner-is-visible
        background-color: transparent
        .header__left
          background-color: rgba($black, 0.1)
          border-bottom: 1px solid rgba($white, 0.0)
        .header__right
          border-bottom: 1px solid rgba($white, 0.1)
          background-color: transparent

.header__content
  position: relative
  height: 100%
  padding: 0 3.4rem
  +MQ(XL)
    padding: 0 6rem
  +MQ(XXL)
    padding: 0 8rem

.logo
  +position(absolute, 0 null null 3.4rem)
  height: 100%
  img
    width: auto
    display: block
    position: relative
    left: 0
    +center(y)
  +MQ(XL)
    left: 6rem
  +MQ(XXL)
    left: 8rem