.sliding-menu-content
  ///////////////////////////////////////////////////////////////////////////////////
  $base-accent-color: #0277BD !default
  $dark-gray: #333 !default
  ul
    padding: 0
    margin: 0
  li
    list-style: none
  a
    text-decoration: none
  //////////////////////////////////////////////////////////////////////////////////
  $sliding-menu-border-color: $dark-gray
  $sliding-menu-background: lighten($sliding-menu-border-color, 5%)
  $sliding-menu-color: #fff
  $sliding-menu-border: 1px solid $sliding-menu-border-color
  $sliding-menu-background-hover: $base-accent-color
  $sliding-menu-color-hover: #fff
  $sliding-menu-background-focus: lighten($sliding-menu-background, 5%)
  +position(fixed, 0px auto 0px 0px)
  +size(220px 100%)
  +transform(translateX(-220px))
  +transition(all 0.25s linear)
  background: $sliding-menu-background
  z-index: 999999
  overflow-y: auto
  -webkit-overflow-scrolling: touch
  li a
    border-bottom: $sliding-menu-border
    color: $sliding-menu-color
    display: block
    font-weight: bold
    padding: 1em
    &:focus
      background-color: $sliding-menu-background-focus
    &:hover
      background-color: $sliding-menu-background-hover
      color: $sliding-menu-color-hover
  &.is-visible
    +transform(translateX(0))

.sliding-menu-fade-screen
  +position(fixed, 0px 0px 0px 0px)
  +transition
  background: black
  opacity: 0
  visibility: hidden
  z-index: 999998
  &.is-visible
    opacity: 0.4
    visibility: visible

.sliding-menu-button
  +button(flat, #0277BD)
  padding: 10px 16px
  display: inline-block
  cursor: pointer
  position: relative
  outline: none
  img
    height: 1.3em

// Based on code by Diego Eis