//  #   Buttons             
//      Defines syling for buttons

//  *******************************************************
//  ##  Variables
//  *******************************************************

//  Styling for buttons
$button-map                         : (
                                        padding: $spacing-unit $spacing-unit/2,
                                        background: $color-gray-light,
                                        color: $color-gray-dark
                                    ) !default;
//  Styling for buttons on hover
$button-hover-map                   : ( color: $color-gray-darker ) !default;


//  *******************************************************
//  ##  Wrapper for multiple buttons
//  *******************************************************

.buttons
{
    &:before,
    &:after
    {
        content: " ";
        display: table;
    }

    &:after
    {
        clear: both;
    }
}

//  *******************************************************
//  ##  Single button
//  *******************************************************

.button
{
    border: 0;
    background-color: transparent;
    
    width: 100%;
    text-align: center;
    float: left;
    line-height: $line-height-base;
    
    @include print( $button-map );
}

.button:hover
{
    @include print( $button-hover-map );
}

.button:focus, 
.button:hover
{
    outline: none;
}

.button.size-2 { width: 50%; }
.button.size-3 { width: 33%; }