/* https://codepen.io/paulnoble/pen/OPXBzB */
skew-angle = 15deg
default-bg = darken(#2896d7, 40%)
alt-bg     = darken(#f06826, 20%)
alt-bg     = darken(#c82672, 10%)
alt-bg     = darken(desaturate(#f65429, 33%), 20%)
panel-x    = 40px
panel-y    = 50px
contrast   = 15%

body
  margin-top: 180px
  background-color: #112
  background-color: darken(#2896d7, 70%)
  font-family: Roboto, 'helvetica neue', Helvetica, Arial, sans-serif

.container
  width: 800px
  margin: auto

.row
  position: relative
  height: 50px  
  z-index: 1
  clear: both
  margin-bottom: 30px
  text-align: center

.row--intro
  padding-top: 20px  
  font-size: 16px
  line-height: 28px
  font-weight: 300
  color: #fff
  opacity: 0.4

  span
    font-size: 11px

.skew-title
  font-size: (panel-y / 2)

.skew-title span
  position: relative  
  display: inline-block  
  width: panel-x
  height: panel-y
  margin: auto
  z-index: 2
  text-align: center
  color: #fff
  font-family: 'roboto condensed'
  font-weight: 700
  font-size: (panel-y / 1.4) 
  line-height: panel-y 
  transform: skewY(-(skew-angle))
  transform-origin: 0 100%
  transition: all 0.2s
  cursor: default
    
  &:after,
  &:before
    display: block
    top: 0
    left: 0
    width: panel-x
    height: panel-y
    position: absolute
    background: default-bg
    content: ' '
    z-index: -1
    transition: all 0.2s
    
  &:before
    background: rgba(0,0,0,0.1)
    transform: skewY((skew-angle))
    transform-origin: 0 0
  
  &:nth-child(even)
    background-color: darken(default-bg, contrast)
    transform: skewY(skew-angle)
    transform-origin: 100% 100%
    color: darken(#fff, contrast)
    
    &:after
      background-color: darken(default-bg, contrast)
    
    &:before
      transform-origin: 100% 0
      transform: skewY(-(skew-angle))
  
  &.flat
    transform: skewY(0)
    color: #fff
    &:before
      transform: skewY(0)  
    &:nth-child(even) 
      &:after
        background-color: default-bg
   
  &.alt
    &:after
      background-color: alt-bg
    &:nth-child(even)
      &:after
        background-color: darken(alt-bg, contrast)
    &.flat
      &:nth-child(even)
        &:after
          background-color: alt-bg