// ==========================================
// == Luna Framework
// == AUTHOR: CLAUDE MYBURGH
// == URL: http://designbycode.co.za
// ==========================================

@import "../functions/main"
.btn,
a.btn,
button.btn,
input[type="submit"].btn
    +makeButton

    > .lunacon 
        vertical-align: bottom

    @each $key, $value in $_color_set

        &--#{$key}
            background: $value
            color: #fff

            @if($key == 'default')
                color: $global-link-color

            &:hover,
            &:active,
            &:focus
                background: darken($value, 5%)
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.38)
                @if($key == 'default')
                    background-color: #e1f3fc

            &-gradient
                background: $value
                background: linear-gradient(180deg, $value, darken($value, 8%))
                color: #fff
                border: solid 1px darken($value, 5%)
                text-shadow: darken($value, 20%) 0 1px 1px
                @if($key == 'default')
                    color: $global-link-color
                    border: solid 1px $mute-color

                &:hover,
                &:active,
                &:focus
                    background: darken($value, 5%)
                    background: linear-gradient(180deg, darken($value, 2%), darken($value, 7%))
                    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.38)
                @if($key == 'default')
                    background-color: #e1f3fc

    &--xs
        padding: 1px 4px
        line-height: (3px + $the__button__font__size)
        font-size: 75%

    &--sm
        padding: 2px 8px
        line-height: (6px + $the__button__font__size)
        font-size: 75%

    &--md
        padding: 4px 16px
        line-height: (12px + $the__button__font__size)

    &--lg
        padding: 8px 32px
        line-height: (16px + $the__button__font__size)

    &--xl
        padding: 12px 44px
        line-height: (24px + $the__button__font__size)
        font-size: 120%

    &--round 
        +radius(100px)

    &--block
        display: block
        width: 100%

.btn__group
    position: relative
    +clearfix

    & > .btn + .btn
        margin-left: 5px


.btn__icon,
.icon,
a.btn__icon,
a.icon,
button.btn__icon,
button.icon,
input[type="submit"].btn__icon,
input[type="submit"].icon
        
    &--left
        margin-right: 5px
        
    &--right
        margin-left: 5px

    &--left,
    &--right
        position: relative

    &--round 
        +radius(100px)