@require "./variables/screen-size.styl"

/* header wrapper
-------------------- */
.header-wrap
  width: 100% // this is for the sticky
  z-index: 100
  padding: 46px 0 0 0 // add padding-top when toolbar is fixed
  background-color: darken($color-herobox, 8%)
  border-bottom: 1px solid rgba(0,0,0,0.2)
  // margin-top: -1px
  overflow-y: hidden
  overflow-x: auto
  // position relative
  @media screen and (max-width: $xs-max-screen-width)  // remove padding-top when toolbar is static
    padding: 0
.toolbar.active ~ .header-wrap
  padding: 0 // remove padding when toolbar is hidden

.sticky-wrapper
  height: 215px

/* login/menu buttons
--------------------- */
.user-menu
  position: absolute
  top: 0.5em
  right: 0.5em
  font-size: 0.85em
  z-index: 1011

  .site-nav
    margin-bottom: 0px

  .tile
    cursor: pointer
    font-weight: 400
    color: #494949
    color: hsla(0, 0%, 15%, 0.8)
    background-color: darken($better, 5%)
    &:hover, &:focus
      background-color: darken($good, 15%)
    &:active
      background-color: darken($good, 25%)

.user-reporter:after
  content: '▾'
  float: right


/* flyout navigation pattern
----------------------------- */
.stacked > li
  display:list-item
  > a
    display:block

.flyout, .flyout-alt
  position: relative
.flyout-content
  position: absolute
  top: 100%
  right: -99999px
  height: 0
  overflow: hidden
.flyout:hover > .flyout-content
  right: 0
.flyout-alt:hover > .flyout-content
  top: 0
  right: 100%

.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content
  height: auto
  overflow: visible

.flyout .tile {
  min-width: 6.5em;
}
.stacked .tile {
  outline: 0
  border: 1px solid rgba(0,0,0,0.2)
  border-top: 0
}


/* header layout
-------------------- */
.site-header
  display: table
  height: 10.5em
  width: 100%

  // Covers avatars, health bar at 1005-768. Fix:
  @media  (max-width: 1005px) and (min-width: 768px)
    margin-top: 2.8em;

// this is a wrapper for avatars in the header
// inside this is the actual `herobox` module
// that can be used anywhere on the site
.herobox-wrap
  display: table-cell
  vertical-align: middle
  width: 10em
  height: 10.5em

/* progress bars
-------------------- */
.hero-stats
  padding: 1.1em 1em 0
  margin: 0
  display: table-cell
  vertical-align: middle
  min-width:175px
  width: 75%
  @media screen and (max-width: $xs-max-screen-width)
    padding: 1.1em 0.618em 0
  .meter-label
    float: left
    @extend $hrpg-label
    hrpg-label-color-mixin(darken($color-herobox, 16.18%))
    width: 2.618em
    text-align:center
    margin-right: 0.618em
  .meter
    position: relative
    overflow: hidden
    border: 1px solid #fff
    height: 1.618em
    margin: 0 0 1em
    outline: 1px solid #999
    .bar
      height: 100%
      transition: width 0.25s ease-out
  hrpg-status-bar-mixin($hrpg-status-bar-color)
    background: lighten($hrpg-status-bar-color, 70%)
    color: darken($hrpg-status-bar-color, 90%)
    .bar
      background: darken($hrpg-status-bar-color, 32.8%)
      border-color: darken($hrpg-status-bar-color, 70%)
  .health
    hrpg-status-bar-mixin($color-hp)
  .experience
    hrpg-status-bar-mixin($color-xp)
    .meter-text
      span
        margin-right: 0.236em
        a
          color: darken($color-xp, 80%)
  .mana
    hrpg-status-bar-mixin($color-mp)
  .meter-text
    position: absolute
    top: 0
    z-index: 4
    line-height: 1.618
    white-space: nowrap
    &.value
      right: 0.382em

  // boss.jade only
  [class^="quest_"] + &
      min-width: 220px
      padding: 1.618em 0 1em

//Apply certain styles in header only

header .hero-stats
  background-color: darken($color-herobox, 4%)
  border-right: 1px solid darken($color-herobox, 12%)

.party
  display: table-cell
  width: 100%

// To align invite button with .herobox-wrap
.party-invite-wrap
  display: table-cell
  vertical-align: middle
  height: 10.5em

button.party-invite
  display: block
  margin: auto 10px