/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../_common";

form { text-align: left; }

fieldset {
    padding: $padding 0;
    margin: 0;
    border: 0;
    border-top: 1px solid $gray-dark;

    &.legendless {
        border: 0;
        padding: 0;
    }
}

legend {
    font-size: 1.3rem;
    padding-right: $padding;
}

select[multiple],
select[size] { height: auto; }

// Reset browser styles
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

// Required values to match browser restrictions
label,
.input-static {
    font-size: inherit;
    line-height: normal;
}

//-------------------- Inputs --------------------//

.input,
.input-static {
    @include reset-inline-block;
    border: 1px solid $gray-dark;
    font-size: $medium-size;
    padding: $medium-padding;
}

.input {
    background: $gray-lightest;
    border-radius: $round;
    @include transition(all .3s);

    &:hover { border-color: $gray-darkest; }
    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }

    @include disabled-state {
        cursor: not-allowed;
        color: $gray-darkest;
        border-color: $gray;
    }

    &[readonly] {
        color: $gray-darkest;
        border: 1px solid $gray-dark;
        box-shadow: none;
    }
}

.input-static {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

select.input { padding: $medium-padding - .05; } // fixes vertical alignment
select.input[multiple] { min-height: 150px; max-height: 500px; }

textarea.input {
    line-height: 135%;
    min-height: 150px;
}

.radio,
.checkbox {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;

    input[type="checkbox"],
    input[type="radio"] {
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 3px;
    }
}

//-------------------- Fields, Labels --------------------//

.field {
    margin-bottom: $margin;

    &.is-required {
        .field-label { font-weight: bold; }
    }

    @include field-style;
}

.field-label {
    display: block;
    vertical-align: middle;
    margin-bottom: 7px;
}

.field-help {
    margin-top: 7px;
    font-size: $small-size;
}

.form-actions {
    text-align: center;
}

//-------------------- Modifiers --------------------//

.form--horizontal {
    .field { @include grid-row; }

    .field-label {
        text-align: right;
        border: 1px solid transparent; // matches input sizes
        padding-top: $medium-padding;
    }

    .field-col { padding-left: $margin; }
}

.form--inline {
    .field,
    .field-label,
    .form-actions {
        display: inline-block;
        vertical-align: middle;
        margin-right: $margin;
        margin-bottom: $margin / 2;
    }

    .field-label { margin: 0 ($margin / 2) 0 0; }
    .field-help { display: none; }
}