wowserhq/wowser

@import './dividers';

wowser

  .frame, .panel
    display: block
    position: relative
    margin: 10px

    &:before
      content: ' '
      display: block
      position: absolute
      top: -3px
      bottom: -3px
      left: -3px
      right: -3px
      z-index: -1
      background: rgba(0, 0, 0, .8)

  .frame
    border-width: 5px
    border-image: url('./images/thin.png') 5 5 5 5 repeat
    border-style: solid

    .divider

      &, &.horizontal
        margin-left: -3px
        margin-right: -3px

    &.thick
      border-width: 11px
      border-image: url('./images/thick.png') 11 11 11 11 repeat

      .divider

        &, &.horizontal
          margin-left: -5px
          margin-right: -5px

  .panel
    border-width: 23px
    border-image: url('./images/panel.png') 23 23 23 23 repeat
    border-style: solid

    .icon.portrait
      position: absolute
      top: -30px
      left: -46px

      & + h1, & + h2, & + h3
        margin-left: 1.5em

    .divider

      &, &.horizontal
        margin-left: -6px
        margin-right: -6px

    &.headless
      border-width: 11px 23px 23px 23px
      border-image: url('./images/panel-headless.png') 11 23 23 23 repeat

      .icon.portrait
        top: -20px