.brand-header-wrapper {
  box-sizing: border-box;
  height: 3.5rem;
  padding: .5rem 1.5rem;

  background-color: white;
}

.brand-header {
  &:not(.split-view) {
    max-width: 60rem;
    margin: 0 auto;
  }

  .logo {
    height: 2.5rem;
  }
}

.brand-footer-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;

  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  margin-top: .5rem;
  padding: .25rem 1.5rem;

  background-color: #555;
}

.brand-footer {
  height: 3rem;

  &:not(.split-view) {
    max-width: 60rem;
    margin: 0 auto;
  }

  .buttons {
    float: left;

    height: 3rem;

    .language-wrapper {
      display: inline-block;
      float: left;

      height: 3rem;
      margin-right: 1rem;

      .language {
        box-sizing: border-box;
        width: 100%;
        height: 2rem;
        margin: .5rem;
        padding: .25rem;

        color: white;
        border: none;
        background-color: inherit;

        // IE doesn't want to change the background color, so this is an IE-specific
        // patch that changes the text color back to black.
        @media all and (-ms-high-contrast:none) {
          color: black;
        }
      }
    }

    .info, .github {
      display: inline-block;

      width: 3rem;
      height: 3rem;

      img {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: .5rem;
      }
    }
  }

  .apinf-logo {
    position: relative;
    left: calc(100% - 12rem);

    width: 12rem;
    height: 3rem;

    span {
      position: absolute;
      top: 0;
      right: .5rem;

      height: .75rem;

      text-align: right;

      color: white;

      font-size: .75rem;
    }

    img {
      position: absolute;
      right: .5rem;
      bottom: 0;

      height: 2rem;
    }
  }
}
