codeRIT/hackathon_manager

$account-nav-spacing-horiz: 20px
$account-nav-padding-vert: 15px

.header
  width: 100%
  height: 80px
  display: flex
  flex-flow: row nowrap
  justify-content: center
  @include css4
    background: var(--account-header--background)

.header__wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-between

.header-logo__image
  height: 70px
  width: auto
  margin: 5px 0

.header-nav
  display: flex
  align-items: center
  width: 100%
  .button
    margin-right: 10px
    &:last-child
      margin-right: 0

.header-nav.start
  justify-content: flex-start
  flex-shrink: 2

.header-nav.end
  justify-content: flex-end
  
.account-nav
  @include css4
    border-bottom: 1px solid var(--account-nav--border-color)
  width: 100%
  display: flex
  flex-flow: row nowrap
  justify-content: center

.account-nav__wrapper
  width: 100%
  max-width: 670px
  padding: 0 5px
  overflow: hidden
  @media (max-width: 700px)
    padding-left: 10px
    padding-right: 10px

.account-nav__links
  display: flex
  flex-flow: row wrap
  margin-left: -1 * $account-nav-spacing-horiz
  margin-right: -1 * $account-nav-spacing-horiz
  @media (max-width: 700px)
    justify-content: center

.account-nav__link
  display: flex
  padding: $account-nav-padding-vert 2px $account-nav-padding-vert
  margin-left: $account-nav-spacing-horiz
  margin-right: $account-nav-spacing-horiz
  text-transform: uppercase
  @include css4
    font-weight: var(--font-bold)
    color: var(--account-nav--text)
  @media (max-width: 700px)
    margin-left: 10px
    margin-right: 10px

.account-nav__link--active
  @include css4
    color: var(--account-nav--text--active)
    border-bottom: 4px solid var(--account-nav--border-color--active)
  padding-bottom: $account-nav-padding-vert - 3px
  margin-bottom: -1px