// Components
section.torch-header
  .torch-account
    background-color: $torch-secondary-color

    ul
      font-size: 0
      list-style-type: none

    li, a
      font-size: $torch-small-font-size

    li
      border-right: 1px solid rgba(255, 255, 255, 0.7)
      margin: 6px 0
      padding: 0 10px

      &:last-child
        border: none
        font-weight: $torch-semibold

    a
      color: $torch-nav-primary-color
      opacity: $torch-hover-opacity
      +transition(opacity $torch-base-duration $torch-base-timing)

      &:hover
        opacity: 1

  header.torch-main-header
    background-color: $torch-primary-color

    h1
      color: $torch-nav-primary-color
      font-size: $torch-font-size-xxl
      font-weight: $torch-bold
      margin: 34px 0 10px 0

    nav
      // @extend %container

    ul
      padding: 0
      list-style-type: none

    li
      margin: 0
      padding: 0
      display: inline-block
      font-size: 18px
      padding: 0 20px 20px 0

    a
      color: $torch-nav-primary-color
      font-size: $torch-font-size-large
      font-weight: $torch-light
      opacity: $torch-hover-opacity
      text-decoration: none
      +transition(opacity $torch-base-duration $torch-base-timing)

      &.active, &:hover
        color: $torch-nav-primary-color
        opacity: 1
        text-shadow: 0.3px 0.3px 0px $torch-nav-primary-color