//----------------------------------------------------------------
//             UniformInput
//----------------------------------------------------------------
@mixin uniformInput(){
    font-family: $system-font;
    border:1px solid color('gray');
    padding: 0.5em;
    line-height: 1.3;
    outline: none;
    appearance: none;
    transition: box-shadow 0.1s ease-in;
    &:focus{
        box-shadow: inset 0 -1px 0 color('green');
        border-bottom-color: color('green');
    }
    &.-block{
        width: 100%;
        max-width: 100%;
    }
    &.pad-2x{
        padding: 1em;
    }
    &.-invert{
        border-color: color('gray-dark');
        border-radius: 0.25em;
    }
    &:disabled{
        background: color('gray-lighter');
        color: color('gray-dark');
    }
}
.uniformInput,
.uniformForm #{$text-inputs},
.uniformForm textarea{
    @include uniformInput;
}

select.uniformInput{
    appearance: none;
    color: color('gray-darker');
    background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNy4xNjdweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSIwIDAgMjcuMTY3IDI4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNy4xNjcgMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJpY29tb29uLWlnbm9yZSI+PC9nPjxwYXRoIGZpbGw9IiM1MDUxNTMiIGQ9Ik0xNiwxMWMwLDAuMjcxLTAuMSwwLjUwNS0wLjI5NywwLjcwM2wtNyw3QzguNTA1LDE4LjksOC4yNzEsMTksOCwxOXMtMC41MDUtMC4xLTAuNzAzLTAuMjk3bC03LTdDMC4wOTksMTEuNTA1LDAsMTEuMjcxLDAsMTFzMC4wOTktMC41MDUsMC4yOTctMC43MDNDMC40OTUsMTAuMDk5LDAuNzI5LDEwLDEsMTBoMTRjMC4yNzEsMCwwLjUwNSwwLjA5OSwwLjcwMywwLjI5N0MxNS45LDEwLjQ5NSwxNiwxMC43MjksMTYsMTF6Ii8+PC9zdmc+);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: auto 40%;
    position: relative;
    border-radius: 0;
    padding-right: 1.5em !important;
}
button.uniformInput{
    background: white;
    @include text-overflow;
}


//----------------------------------------------------------------
//             UniformForm
//----------------------------------------------------------------
.uniformForm{
    .form-group{
        position: relative;
        margin-bottom: 0.9em;
        label{
            font-weight:bold;
            display:block;
        }
        &.collapse{
            margin-bottom: 0;
        }
        &:last-of-type{
            margin-bottom: 0;
        }
    }
    
    .uniformInput,
    #{$text-inputs},
    textarea{
        display:block;
        width: 100%;
        max-width: 100%;
    }
    
    &.-invert{
        #{$text-inputs},
        textarea,
        .uniformFloatingLabel{
            border-color: color('gray-darker');
            border-radius: 0.25em;
        }
        [data-uniform-error]{
            color: color('red-bright');
        }
        .uniformInputGroup{
            overflow: hidden;
            border-color: color('gray-darker');
            border-radius: 0.25em;
        }
    }
}

[data-uniform-error]{
    position: relative;
    color: color('red');
    .uniformInputGroup{
        border-color: color('red') !important;
    }
    input{
        border-color: color('red') !important;
    }
    &::after{
        content: attr(data-uniform-error);
        color: color('red');
        position: absolute;
        bottom: -7px;
        left: 1em;
        border: 1px solid color('red');
        background: white;
        font-size:11px;
        line-height: 14px;
        @include text-overflow;
        padding: 0 0.5em;
        max-width: 100%;
    }
}

@include size-rules('.uniformForm.-table'){
    display: table;
    width: 100%;
    .form-group{
        display: table-row;
        & > * {
            display: table-cell;
            &.fill{
                width: 100%;
            }
        }
        & > label,
        & > div,
        & > span {
            padding-bottom: 1em;
            padding-right: 0.5em;
            &:last-child{
                padding-right: 0;
            }
        }
    }
}


@import './form/*';