@import 'uniform/functions';
@import 'uniform/mixins';

//----------------------------------------------------------------
//             Buttons
//----------------------------------------------------------------
.uniformButton,
.uniformButtonGroup > *{
    --bg-opacity: 1;
    --text-opacity: 1;
    --border-opacity: 0.6;
    --active-opacity: 0.2;
    --border-radius: 0.35em;
    --pad-v: 0.5em;
    --pad-h: 0.85em;
    
    position:relative; // for adding loaders to buttons which have position:absolute
    z-index: 1;
    outline: none;
    appearance: none;
    display: inline-block;
    text-decoration: none;
    user-select: none;

    padding: var(--pad-v) var(--pad-h);
    vertical-align: middle;
    text-align: center;
    line-height:1;
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: 1px;
    
    color: rgba(color('gray-80'), var(--text-opacity));
    background-color: rgba(white, var(--bg-opacity));
    background-image: linear-gradient(rgba(black, 0) 33%, rgba(black, 0.1));
    background-blend-mode: multiply;
    border-color: rgba(color('gray-50'), var(--border-opacity));
    
    transition: color 100ms, box-shadow 100ms, background 100ms, padding 100ms;
    box-shadow: var(--box-shadow);
}


//----------------------------------------------------------------
//             Color
//----------------------------------------------------------------
@each $name, $color in $color_spectrum {
    .uniformButton.-#{$name},
    .uniformButtonGroup.-#{$name} > *{
        background-color: rgba($color, var(--bg-opacity));
        background-image: linear-gradient(rgba(black, 0) 33%, rgba(black, 0.3));
        background-blend-mode: overlay;
        border-color: rgba(darken($color, 30), var(--border-opacity));
        @if lightness($color) > 65% {
            color: rgba(change-color($color, $lightness: 30), var(--text-opacity));
        } @else {
            color: rgba(white, var(--text-opacity));
        }
        @if lightness($color) < 35% {
            --active-opacity: 0.5;
        }
    }
    .uniformButton.-#{$name}.-outline{
        border-color: rgba($color, var(--border-opacity));
        color: rgba($color, var(--text-opacity));
    }
    .uniformButtonGroup.-outline.-#{$name} > * {
        border-color: rgba($color, var(--border-opacity));
        color: rgba($color, var(--text-opacity));
    }
}

.uniformButton,
.uniformButtonGroup > *{
    //----------------------------------------------------------------
    //             States
    //----------------------------------------------------------------
    &:hover,
    &.-hover{
        --bg-opacity: 1;
        --border-opacity: 1;
        background-image: linear-gradient(rgba(white, 0.2) 33%, rgba(white, 0));
    }

    &:focus,
    &.-focus{
        box-shadow: 0 0 0 2px rgba(color('blue'), 0.7);
        z-index: 2;
        &.-active,
        &:active{
            box-shadow: 0 0 0 2px rgba(color('blue'), 0.7), inset 1px 1px 3px rgba(black, 0.2);
        }
    }

    &:active,
    &.-active{
        box-shadow: inset 1px 1px 3px rgba(black, var(--active-opacity));
        padding-top: calc(var(--pad-v) + 1px);
        padding-bottom: calc(var(--pad-v) - 1px);
    }
    
    &:disabled,
    &.-disabled{
        --text-opacity: 0.5;
        cursor: not-allowed;
        background-image:
            linear-gradient(rgba(black, .5), rgba(black, 0.5)),
            linear-gradient(hsla(0,0%,50%, .5), hsla(0,0%,50%, .5));
        background-blend-mode: saturation, luminosity;
    }
    
    &:visited{
        color: currentColor;
    }
}

.uniformButton{
    //----------------------------------------------------------------
    //             Styles
    //----------------------------------------------------------------
    &.-clear{
        background: none;
        border-color: transparent;
    }
    &.-outline{
        --bg-opacity: 0;
        --border-opacity: 1;
        border-width: 0.1429em;
        background-image: none;
    }
    
    &.-block{
        display:block;
        width:100%;
    }
    
    
    //----------------------------------------------------------------
    //             Size
    //----------------------------------------------------------------
    &.-xs{
        --pad-v: 0.1em;
        --pad-h: 0.3em;
    }
    &.-sm{
        --pad-v: 0.25em;
        --pad-h: 0.5em;
    }
    &.-lg{
        --pad-v: 1em;
        --pad-h: 2em;
    }
    &.-xl{
        --pad-v: 1.5em;
        --pad-h: 3em;
        --border-radius: 0.5em;
    }
}



//----------------------------------------------------------------
//             Button Group
//----------------------------------------------------------------

.uniformButtonGroup {
    display: inline-flex;
    & > * {
        border-radius: 0;
        margin-right: -1px;
        &:first-child{
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }
        &:last-child{
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }
    }
    
    
    //----------------------------------------------------------------
    //             Styles
    //----------------------------------------------------------------
    &.-clear > * {
        background: none;
        border-color: transparent;
    }
    &.-outline > *{
        --bg-opacity: 0;
        --border-opacity: 1;
        border-width: 0.1429em;
        margin-right: -0.1429em;
        background-image: none;
    }
    &.block,
    &.-block{
        display: flex;
    }
    
    
    //----------------------------------------------------------------
    //             Size
    //----------------------------------------------------------------
    &.-xs > *{
        --pad-v: 0.1em;
        --pad-h: 0.3em;
    }
    &.-sm > *{
        --pad-v: 0.25em;
        --pad-h: 0.5em;
    }
    &.-lg > *{
        --pad-v: 1em;
        --pad-h: 2em;
    }
    &.-xl > *{
        --pad-v: 1.5em;
        --pad-h: 3em;
        --border-radius: 0.5em;
    }
}