//----------------------------------------------------------------
//             Buttons
//----------------------------------------------------------------
.uniformButtonGroup a,
.uniformButton{
    outline: none;
    appearance: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;

    padding: 0.5em 0.75em;
    vertical-align: middle;
    text-align: center;
    line-height:1;
    position:relative; // for adding loaders to buttons which have position:absolute
    transition: all 0.2s;

    color:$gray;
    background-color: white;
    background-image: linear-gradient(white 33%, darken(white, 7));
    border-radius: 0.25em;
    border:1px solid lighten($gray, 40);
    
    .fortycon{
        line-height:0;
        vertical-align:-1px;
        font-size:1.2em;
        margin-right:3px;
        &.end{
            margin-right: 0;
            margin-left: 3px;
        }
    }

    &:visited{
        color:$gray;
    }

    &:hover,
    &:focus,
    &.hover{
        box-shadow: inset 0 0 10px rgba(black, 0.1);
    }
    &:active,
    &.active{
    }
    
    &.green,
    &.blue,
    &.red {
        color: white;
    }
    &.green { background: $green;}
    &.blue  { background: $blue;}
    &.red   { background: $red;}
    &.green { background: $green;}
    &.blue  { background: $blue;}
    &.red   { background: $red;}
    
    
    //----------------------------------------------------------------
    //             styles
    //----------------------------------------------------------------
    &.clear{
        background: none;
        border-color: transparent;
    }
    &.outline{
        border-color: $gray;
        background:none !important;
        text-shadow:none !important;
        &.dashed{
            border-style:dashed;
        }
    }
    &.small{
        padding: 0.3em 0.5em;
        font-size: 0.8em;
    }
    &.large{
        padding: 1em 2em;
        font-weight:bold;
        .fortycon{
            line-height:0.5em;
            vertical-align:-6px;
            font-size:2em;
            margin-right:7px;
            font-weight:normal;
        }
    }
    
    &.warn:hover{
        border-color:$red;
        background: $red;
        color: white;
        &.clear{
            color: $red;
            background: none;
        }
        &.outline{
            color: $red;
            border-color: lighten($gray, 30);
        }
    }
    
    &.block{
        padding-left:0.5em !important;
        padding-right:0.5em !important;
        display:block;
        width:100%;
    }
    
    
    //----------------------------------------------------------------
    //             colors
    //----------------------------------------------------------------
    
    &.green{
        background-color: darken($green, 3);
        background-image: linear-gradient(lighten($green, 5), darken($green, 3));
        border-color: darken($green, 3);
        
        &.outline{
            border-color: $green-dark;
            color:$green-dark;
        }
    }
    
    &.green,
    &.red,
    &.blue{
        color:white;
        text-shadow:0 1px 2px rgba(black, 0.1);
    }
    
    &.red{
        background-color: darken($red, 3);
        background-image: linear-gradient($red, darken($red, 3));
        border-color: darken($red, 3);
        &.outline{
            color:$red-dark;
            border-color:$red-dark;
        }
    }
    
    &.blue{
        background-color: darken($blue, 3);
        background-image: linear-gradient($blue, darken($blue, 3));
        border-color:darken($blue, 3);
        
        &.outline{
            color:$blue;
            border-color: $blue;
        }
    }
    &.white{
        &.outline{
            color:white;
            border-color:white;
        }
    }
    
    &.gray{
        color: lighten($gray, 20);
        &.outline{
            color: lighten($gray, 20);
            border-color: lighten($gray, 30);
        }
    }
    
    &:disabled,
    &.disabled,
    &:disabled:hover,
    &.disabled:hover{
        cursor: not-allowed;
        color:lighten($gray, 40);
        background-image:none !important;
        background-color: darken($background, 10);
        border-color: lighten($gray, 40);
        text-shadow: none;
    }
}
span.uniformButton{
    cursor: auto;
}
a.uniformButton{
    user-select: none;
}

.uniformButtonGroup {
    font-size: 0;
    a{
        font-size: 1rem;
        position:relative;
        z-index: 1;
        margin-right: -1px;
        border-radius: 0;
        &:last-of-type{
            border-radius: 0 0.25em 0.25em 0;
        }
        &:first-of-type{
            border-radius: 0.25em 0 0 0.25em;
        }
        &.active{
            background-color: darken($green, 3);
            background-image: linear-gradient(lighten($green, 5), darken($green, 3));
            border-color: darken($green, 3);
            color: white;
        }
    }
}