.footer-mobile
  display: block
  width: 100%
  height: 8rem
  +MQ(XL)
    display: none

.footer-mobile
  &.split
    position: relative
    border-top: 1px solid rgba($white, 0.1)
  &.full
    +position(absolute, null null 0 0)
    border-top: none
  
.footer-desktop
  display: none
  +MQ(XL)
    display: block
    +position(absolute, null null 0 0)
    width: 100%
    height: 8rem
    overflow: hidden
    z-index: 2
  +MQ(XXL)
    height: 9rem

.footer-desktop__left,
.footer-desktop__right
  transition: all 0.3s ease-in-out

.footer-desktop
  &.split
    .footer-desktop__left
      border-top: 1px solid rgba($white, 0.1)
    .footer-desktop__right
      background-color: rgba($black, 0.1)
    &.menu-is-visible
      .footer-desktop__left,
      .footer-desktop__right
        border-top: 1px solid rgba($white, 0.1)
        background-color: rgba($black, 0.1)
    &.inner-is-visible
      .footer-desktop__left
        border-top: 1px solid rgba($white, 0.0)
        background-color: rgba($black, 0.2)
      .footer-desktop__right
        background-color: transparent
        border-top: 1px solid rgba($white, 0.1)
  &.full
    .footer-desktop__left,
    .footer-desktop__right
      background-color: transparent
      border-bottom: none
    &.menu-is-visible
      .footer-desktop__left,
      .footer-desktop__right
        border-top: 1px solid rgba($white, 0.1)
        background-color: transparent
    &.inner-is-visible
      .footer-desktop__left
        border-top: 1px solid rgba($white, 0.0)
        background-color: rgba($black, 0.2)
      .footer-desktop__right
        background-color: transparent
        border-top: 1px solid rgba($white, 0.1)

