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

@import "../common";

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

    &.no-legend {
        border: 0;
        padding: 0;
    }
}

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

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

// Override normalize
input[type="search"] {
    box-sizing: border-box;
    -webkit-appearance: none;
}

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

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

.#{$vendor-prefix}input,
.#{$vendor-prefix}input-static,
.#{$vendor-prefix}input-radio,
.#{$vendor-prefix}input-checkbox {
    @include reset-inline-block;
    line-height: normal;
    border: 1px solid $gray-dark;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none; // Remove inner shadow on iOS
    @include size-medium;

    @include is-small(true, true) { @include size-small; }
    @include is-large(true, true) { @include size-large; }
}

.#{$vendor-prefix}input {
    background: $gray-lightest;
    border-radius: $round;
    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 is-disabled {
        cursor: not-allowed;
        color: $gray-darkest;
        border-color: $gray;
    }
}

.#{$vendor-prefix}input-static {
    background: transparent;
    border-color: transparent;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.#{$vendor-prefix}input-radio,
.#{$vendor-prefix}input-checkbox {
    padding: 0;
    border: 0;

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

select.#{$vendor-prefix}input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.#{$vendor-prefix}input[multiple] {
    max-height: 500px;
}

textarea.#{$vendor-prefix}input {
    line-height: 135%;
    min-height: 150px;
}

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

.#{$vendor-prefix}field {
    margin-bottom: $margin;

    &.is-required {
        .#{$vendor-prefix}field-label { font-weight: bold; }
    }
}

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

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

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

    &.is-success {
        .#{$vendor-prefix}input {
            border-color: $success;

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

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

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

.#{$vendor-prefix}field-help {
    margin-top: .5em;
    font-size: $small-size;
}

.#{$vendor-prefix}form-actions {
    text-align: center;
}

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

.#{$vendor-prefix}form--horizontal {
    .#{$vendor-prefix}field { @include grid-row; }

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

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

.#{$vendor-prefix}form--inline {
    margin-bottom: -($margin / 2);

    .#{$vendor-prefix}field,
    .#{$vendor-prefix}field-label,
    .#{$vendor-prefix}form-actions {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        margin-right: $margin;
        margin-bottom: $margin / 2;
    }

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

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