.site-header,
.app-header {
  @include dark-module;

  position: relative;

  a {
    color: inherit;
  }
}

.site-header {
  .wrapper {
    position: relative;

    @include clearfix();
  }

  .logo {
    position: relative;
    z-index: 2;

    &.small {
      display: inline-block;
      fill: currentColor;
      width: 56px;
      height: 52px;
      background-color: #fff;
      float: left;
      text-align: center;
      padding-top: 16px;

      svg {
        fill: $grey;
        width: 32px;
        height: 32px *0.618; // height based on viewbox, for IE
      }

      @if $primary-colour != $default-primary-colour {
        background-color: $primary-colour;

        svg {
          fill: #fff;
        }
      }

      &.adminbrand {
        @include grad;

        svg {
          fill: #fff;
        }
      }
    }

    &.type {
      margin-top: 15px;
      padding-left: 12px;
      height: 26px;
      display: none;

      svg {
        fill: #fff;
        height: 26px;
        width: auto;
      }

      @media (min-width: $screen-sm-min) {
        display: inline-block;
      }

      &.openspending {
        svg {
          width: 26px *7.12; // width based on viewbox, for IE
        }
      }
    }
  }
}

.app-header {
  height: 50px;

  & > a {
    display: block;
    height: 50px;

    &:hover {
      background-color: darken($grey, 4);
    }

    svg {
      fill: currentColor;
      height: 50px;
    }

    &:first-of-type {
      background-color: $primary-colour;
      width: 50px;
      float: left;
      text-align: center;

      svg {
        width: 30px;
      }

      & + a {
        margin-left: 50px;
        width: 155px;
        padding-left: 10px;

        svg {
          width: 90px;
        }
      }
    }
  }

  .secondary-nav {
    @media (min-width: $screen-md-min) {
      top: 19px;
    }
  }
}