.#{$wrapper-class-name}
  +rem('max-width', $wrapper-max-width)
  +box-sizing(border-box)
  +margin(horizontal, auto)
  +padding(horizontal, $wrapper-horizontal-padding)
  clear: both

// state
.is-clearfix
  *zoom: 1
  &:after
    content: ''
    display: table
    clear: both
.is-relative
  position: relative
.is-fixed
  +fixed(left 0, top 0)
  width: 100%
.is-clickable
  cursor: pointer
.is-clear
  clear: both
.is-gradient
  filter: none
.is-visible
  overflow: visible !important
.is-inline
  display: inline

.is-block-link
  display: block
  text-decoration: none
.is-scroll-x-wrapper
  overflow-x: auto
  overflow-y: hidden
  -webkit-overflow-scrolling: touch
  width: 100%
  position: relative
.is-max-wd
  width: 100%
  display: block

.is-mgb-0
  margin-bottom: 0 !important
.is-pdt-0
  padding-top: 0 !important
.is-pd-0
  padding: 0 !important

body
  .is-hidden
    visibility: hidden
    display: none
    +opacity(0)
  .is-invisible
    margin-left: -99999px
    position: absolute
    visibility: hidden
    +opacity(0)
  .is-shown
    +inline-block
  .is-horizontal-closed
    width: 0
    overflow: hidden

.is-z-index-100
  z-index: 100
  position: relative

.is-table-row
  display: table-row !important
.is-table-cell
  display: table-cell !important

// layout
.is-center-block
  +margin(horizontal, auto)
  display: block
.is-center
  display: block
  +margin(horizontal, auto)
.is-horizontal-center
  display: block
  +margin(horizontal, auto)

// vertical
.is-vertical-center
  vertical-align: middle !important
.is-vertical-top
  vertical-align: top !important
.is-vertical-bottom
  vertical-align: bottom !important

// float
.is-left
  float: left
.is-right
  float: right

// text-align
.is-center-wrapper
  text-align: center
.is-right-wrapper
  text-align: right
.is-left-wrapper
  text-align: left

// list
.is-horizontal-list
  +horizontal-list(0)

.is-inline-blocks
  >*
    +inline-block(bottom)

.is-nowrap
  white-space: nowrap

// Font Awesome

// http://hayashikejinan.com/webwork/css/913/
.fa-hatena
  &:before
    content: "B!"
    font-family: Verdana
    font-weight: bold
.fa-triangle-o:before
  content: "\0025b3"
  +sans-serif
.fa-triangle:before
  content: "\0025b2"
  +sans-serif