.header {
  height: 64px;
  box-sizing: border-box;
  color: #111111;
  background: #fffefc;

  .outer {
    max-width: 1200px;
    height: 64px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .inner {
    height: 64px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    .logo-wrapper {
      height: 64px;
      display: flex;
      align-items: center;

      .logo {
        display: block;
        height: 32px;
      }

      .logo:focus {
        box-shadow: rgba(46, 170, 220, 70%) 0px 0px 0px 1px inset,
          rgba(46, 170, 220, 40%) 0px 0px 0px 2px;
      }

      .logo:active {
        box-shadow: none;
      }
    }

    .nav-wrapper {
      display: flex;
      flex-flow: row nowrap;

      .nav {
        height: 64px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        font-weight: 500;

        .nav-list {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;

          .item {
            height: 32px;
            border-radius: 3px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;

            a,
            a:visited {
              color: inherit;
              text-decoration: none;
              line-height: 1;
              padding: 8px 12px;
            }

            .nav-logout {
              cursor: pointer;
              border-radius: 3px;
            }

            .nav-logout:focus {
              box-shadow: rgba(46, 170, 220, 70%) 0px 0px 0px 1px inset,
                rgba(46, 170, 220, 40%) 0px 0px 0px 2px;
            }

            .nav-logout:active {
              box-shadow: none;
            }
          }

          .item:hover {
            background-color: $nav-item-hover-background;
          }
        }

        .nav-divider {
          width: 1px;
          height: 20px;
          margin: 0 10px;
          background: $light-gray;
        }

        .nav-greeting {
          display: flex;
          align-items: center;
          font-weight: 400;
          padding: 0 12px;
        }
      }
    }
  }
}

.header.private {
  border-bottom: 1px solid $light-gray;
}

@media (max-width: 680px) {
  .nav-divider {
    display: none;
  }

  .nav-list.links {
    display: none !important;
  }
}
