/**
 * @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;
}

input[type="search"] {
    @include box-sizing("border-box");
}

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

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

.input,
.input-static,
.input-radio,
.input-checkbox {
    @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 $default-transition);

    &:hover { border-color: $gray-darkest; }

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

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

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

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

.input-radio,
.input-checkbox {
    padding: 0;

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

select.input {
    -webkit-appearance: none;
    padding: $medium-padding - .05rem; // fixes vertical alignment
}

select.input[multiple] {
    min-height: 150px;
    max-height: 500px;
}

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

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

.field {
    margin-bottom: $margin;

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

.field:not(.is-disabled) {
    &.is-error {
        .input {
            border-color: $error;

            &:focus { box-shadow: 0 0 5px $error-light; }
        }

        .input-radio,
        .input-checkbox {
            color: $error-dark;
        }
    }

    &.is-success {
        .input {
            border-color: $success;

            &:focus { box-shadow: 0 0 5px $success-light; }
        }

        .input-radio,
        .input-checkbox {
            color: $success-dark;
        }
    }
}

.field-label {
    display: block;
    vertical-align: middle;
    margin-bottom: .5em;
}

.field-help {
    margin-top: .5em;
    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;
        line-height: normal;
        margin-right: $margin;
        margin-bottom: $margin / 2;
    }

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

    .input-radio,
    .input-checkbox {
        padding: $medium-padding 0;
    }
}