$i: !important

// input

$input-height: 36px
$button-width: 100px
$input-width: 300px
$input-border-width: 1px
$input-border-color: #ccc

// color

$primary: #0085ba
$secondary: #23282d
$icon-color: #666
$line: #eee
$line-dark: #ddd
$border: #e5e5e5

$danger: #a00
$warning: #dd823b
$success: #46b450

// mixins - prefixes

=appearance($opt)
    -webkit-appearance: $opt
    -moz-appearance: $opt
    appearance: $opt

=filter($opt)
    -webkit-filter: $opt
    filter: $opt

=animation($opt)
    -webkit-animation: $opt
    animation: $opt

=flex
    display: -webkit-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex

=transform($opt)
    -webkit-transform: $opt
    -moz-transform: $opt
    -ms-transform: $opt
    -o-transform: $opt
    transform: $opt

// mixins - helpers

=icofont
    font-family: "gbico"
    content: attr(data-icon)
    font-style: normal
    font-weight: normal
    font-variant: normal
    text-transform: none
    speak: none
    line-height: 1
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

=ico
    color: $icon-color
    font-size: 17px
    text-decoration: none

=background-cover
    background-size: cover
    background-position: center

=clearfix
    &
        *zoom: 1
    &:after, &:before
        content: ''
        display: table
    &:after
        clear: both

=hidden
    display: none

=vhidden
    border: 0
    clip: rect(0 0 0 0)
    height: 1px
    margin: -1px
    overflow: hidden
    position: absolute
    padding: 0
    width: 1px

=valign
    &:before
        content: ''
        display: inline-block
        height: 100%
        vertical-align: middle
    & > *
        display: inline-block
        vertical-align: middle

=menu
    list-style-type: none
    padding: 0
    margin: 0

=sticky
    position: fixed
    top: 0
    z-index: 1

=full-width
    width: 100vw
    margin-left: -50vw
    left: 50%
    position: relative

=input-checkbox
    cursor: pointer
    line-height: $input-height / 2
    display: inline-block
    position: relative
    vertical-align: middle
    margin-right: 10px
    &:before
        content: ''
        display: inline-block
        vertical-align: top
        margin-right: 10px
        height: $input-height / 2
        width: $input-height / 2
        border: $input-border-width solid $input-border-color
    &:after
        position: absolute
        content: ''
        top: 3px
        left: 3px
        height: $input-height / 2 - 6
        width: $input-height / 2 - 6
        background-color: $primary
        +transform(scale(0))
        transition: transform .15s ease-in-out
    &:hover
        &:before
            border-color: $primary

=button
    color: $secondary
    text-decoration: none
    display: inline-block
    height: $input-height
    line-height: $input-height - $input-border-width
    outline: 0
    width: 100%
    vertical-align: middle
    background-color: #fff
    border: $input-border-width solid $input-border-color
    border-radius: 2px
    padding: 0 $input-height / 2
    transition: all .15s ease-in-out
    transition: .2s ease-out
    text-align: center
    cursor: pointer
    span
        display: block
        transition: transform .07s ease-in-out
    &:active
        color: $secondary
    &:hover
        background-color: lighten($primary, 60%)
        border-color: $primary
    &:focus
        background-color: lighten($primary, 55%)
        span
            +transform(translateX(2px))
.btn
    +button

[class^="ico-"],
[class*=" ico-"]
    +ico

.hidden
    +vhidden