_header-nav.scss

.header-nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0.5rem;
  position: relative;
  overflow: hidden;
  height: 3.5rem;

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

  .header-nav_title {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 1rem 0.5rem;
    text-align: center;

    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');
      }

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