_header-nav.scss

.header-nav {
  // Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
  display: flex;
  flex-direction: row;
  height: 3.5rem;

  .header-nav_left,
  .header-nav_right {
    flex-direction: column;
    justify-content: center;
  }

  .header-nav_left {
    padding-left: 0.5rem;
  }

  .header-nav_right {
    padding-right: 0.5rem;
  }

  .header-nav_title {
    flex: 1; // https://stackoverflow.com/a/35270047/3208553
    z-index: 2;

    /**
     * Postfix is component to apply these styles to.
     * Explicit list so easy to change incase header
     * modified on a specific page
     */
    &.-header-accounts,
    &.-header-create-account,
    &.-header-onboarding,
    &.-header-scan-signed-tx,
    &.-header-signed-tx-summary,
    &.-header-tx-qr-code,
    &.-header-txform,
    &.-header-unlock,
    &.-header-whitelist, {
      justify-content: center;
      align-items: center;
      padding-top: 1rem;
      padding-bottom: 1rem;

      /* Offset from right when only button on left */
      &.-offset-left {
        padding-right: 2rem;
      }

      /* Offset from left when only button on right */
      &.-offset-right {
        padding-left: 2rem;
      }
    }

    &.-header-tokens {
      padding-left: 0.5rem;
    }

    a,
    a:link,
    a:visited,
    h1 {
      margin: -0.175rem 0 -0.175rem;
      padding: 0.25rem 0.5rem 0.175rem;
      display: inline-block;
      font-size: ms(0);
      line-height: ms(0) * 0.8;
      color: rgba($black, 0.675);
      font-weight: 500;
    }
  }

  a,
  a:link,
  a:visited {
    z-index: 9;
    color: rgba($black, 0.675);
    font-weight: 500;
    display: block;
    margin: -0.175rem 0 -0.175rem;
    padding: 0.25rem 0.5rem 0.175rem;
    border-radius: 0.25rem;
    &:hover {
      background: rgba($faint, 0.5);
      color: $black;
    }

    &.icon {
      width: ms(0) * 1.3 + 0.5rem;
      height: ms(0) * 1.3 + 0.5rem;
      text-indent: -9999rem;
      background-size: ms(0) auto;
      background-position: center center;
      background-repeat: no-repeat;
      opacity: 0.675;
      &:hover {
        opacity: 1;
      }

      &.-receive {
        background-image: url('./assets/img/icons/receive.svg');
      }

      &.-settings {
        background-image: url('./assets/img/icons/gear.svg');
      }

      &.-back {
        background-image: url('./assets/img/icons/back.svg');
      }

      &.-close {
        background-image: url('./assets/img/icons/close.svg');
      }

      &.-new {
        background-image: url('./assets/img/icons/plus.svg');
      }
    }
  }
}