/**
 * @var {color} $form-bg-color
 * Default background-color for forms.
 *
 * @member Ext.form.Panel
 */
$form-bg-color: #eee !default;

/**
 * @class Ext.field.Field
 */

/**
 * @var {color} $form-field-bg-color
 * Default background-color for form fields.
 */
$form-field-bg-color: #fff !default;

/**
 * @var {color} $form-light
 * Light color for form fields, mostly used on field borders.
 */
$form-light: #ddd !default;

/**
 * @var {color} $form-dark
 * Dark color for form fields, mostly used on labels/text.
 */
$form-dark: #333 !default;

/**
 * @var {measurement} $form-label-width
 * Default width for form labels.
 */
$form-label-width: 6em !default;

/**
 * @var {color} $form-label-background-color
 * The default background color for labels
 */
$form-label-background-color: lighten($form-light, 10%);

/**
 * @var {measurement} $form-field-height
 * Default height for form fields.
 */
$form-field-height: 2.5em !default;

/**
 * @var {measurement} $form-spacing
 * Default spacing for form fields, used for padding, etc.
 */
$form-spacing: .6em !default;

/**
 * @var {measurement} $form-textarea-height
 * Default height for form textareas.
 *
 * @member Ext.field.TextArea
 */
$form-textarea-height: 6em !default;

/**
 * @var {measurement} $form-thumb-size
 * Default size of "thumbs" for form sliders/toggles.
 *
 * @member Ext.field.Slider
 */
$form-thumb-size: 2.2em !default;

/**
 * @var {measurement} $form-toggle-size
 * Thumb size minus padding for inset thumbs like in a Toggle element.
 *
 * @member Ext.field.Toggle
 */
$form-toggle-size: $form-thumb-size - .35em;

/**
 * @var {measurement} $form-fieldset-radius
 * Default border-radius for form fieldsets.
 *
 * @member Ext.form.FieldSet
 */
$form-fieldset-radius: .4em !default;

/**
 * @var {measurement} $form-slider-size
 * Height of the slider "track."
 *
 * @member Ext.field.Slider
 */
$form-slider-size: .8em !default;

$form-spinner-button-width: 3em !default;

// Private utility vars & mixins

$form-thumb-space: ( $form-thumb-size - $form-toggle-size ) / 2;
$form-input-fields: '.x-field-text, .x-input-text, .x-input, .x-input-number, .x-spinner-body, .x-input-radio, .x-input-checkbox, .x-input-email, .x-input-url, .x-input-password, .x-input-slider';
$form-scrollable-fields: '.x-field-slider, .x-field-toggle';

@mixin label {
    text-shadow: #fff 0 1px 1px;
    color: $form-dark;
}

@mixin checkmark($color: #000){
    @extend .x-checkmark-base;
    color: $color;
}

@mixin radiomark($color: #000, $size: 20px) {
    @include insertion($size, $size, ($size * -.5) + 24, auto);
    right: ($size * -.5) + 24;
    background-color: $color;
    @include border-radius($size);
}

@mixin selectmark($color: #000){
    @extend .x-selectmark-base;
    background-color: $color;
}

// Ext.form.Panel
.x-form {
    .x-scroll-container {
        background-color: $form-bg-color;
    }
}

// Label
.x-form-label {
    @include label();
    @include bevel-text('light');
    padding: $form-spacing;
    background-color: $form-label-background-color;

    span {
        font-size: .8em;
    }
}

//  Ext.field.Field
.x-field {
    min-height: $form-field-height;
    background: #fff;

    &:last-child {
        border-bottom: 0;
    }
}

.x-spinner {
    .x-field-input {
        .x-input-el {
            -webkit-text-fill-color: #000;
        }
    }
}

@if $include-border-radius {
    .x-label-align-left {
        &:first-child {
            .x-form-label {
                @include border-top-left-radius($form-fieldset-radius);
            }
        }

        &:last-child {
            .x-form-label {
                @include border-bottom-left-radius($form-fieldset-radius);
            }
        }
    }

    .x-label-align-right {
        &:first-child {
            .x-form-label {
              @include border-top-right-radius($form-fieldset-radius);
            }
        }

        &:last-child {
            border-bottom: 0;

            .x-form-label {
                @include border-bottom-right-radius($form-fieldset-radius);
            }
        }
    }

    .x-label-align-top {
        &:first-child {
            .x-form-label {
                @include border-top-radius($form-fieldset-radius);
            }
        }
    }

    .x-label-align-bottom {
        &:last-child {
            .x-form-label {
                @include border-bottom-radius($form-fieldset-radius);
            }
        }
    }
}

.x-input-el {
    padding: .4em;
    min-height: $form-field-height;
    border-width: 0;
    background: transparent;
    -webkit-appearance: none;
}

//disabled fields
.x-item-disabled .x-form-label,
.x-item-disabled input,
.x-item-disabled .x-input-el,
.x-item-disabled .x-spinner-body,
.x-item-disabled select,
.x-item-disabled textarea,
.x-item-disabled .x-field-clear-container {
    color: #b3b3b3;
    -webkit-text-fill-color: #eee;
    pointer-events: none;
}

.x-item-disabled .x-form-label:after {
    color: #666 !important;
}

// Ext.field.TextArea
.x-field-textarea {
    textarea {
        min-height: $form-textarea-height;
        padding-top: .5em;
    }
}

// Ext.field.Checkbox
.x-checkmark-base {
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    content: '3';
    font-family: 'Pictos';
    font-size: 30px;
    text-align: right;
    line-height: 50px;
}

.x-field-checkbox .x-input-el {
    position: relative;

    &:after {
        @include checkmark($form-light);
    }

    &:checked:after {
        @include checkmark($active-color);
    }
}

.x-field-radio .x-input-el {
    position: relative;

    &:before {
        @include radiomark($form-light, 26px);
    }

    &:after {
        @include radiomark(darken($form-light, 5), 16px);
    }

    &:checked:after {
        background-color: $active-color;
    }
}

.x-item-disabled {
    &.x-field-radio {
        .x-input-el:checked:before {
            background: mix($form-light, $active-color, 60);
        }

        .x-input-el:after {
            background: #eee;
        }
    }

    &.x-field-checkbox {
        .x-input-el {
            &:checked:after {
                background: mix($form-light, $active-color, 60);
            }
        }
    }
}

// Ext.field.Spinner
.x-spinner {
    &.x-item-disabled {
        .x-input-el {
            -webkit-text-fill-color: #B3B3B3;
        }

        .x-spinner-button {
            @include toolbar-button(lighten($form-light, 10), matte);
            color: #aaa !important;
        }
    }

    .x-spinner-button {
        margin-top: .25em;
        margin-bottom: .25em;
        width: 2em;
        padding: .23em 0 .27em;
        font-weight: bold;
        text-align: center;
        border: 1px solid $form-light !important;
        @include border-radius(1em);
        @include toolbar-button(lighten($form-light, 5), matte);
    }

    .x-spinner-button-down {
        margin-left: .25em;
    }
    .x-spinner-button-up {
        margin-right: .25em;
    }

    &.x-field-grouped-buttons {
        .x-spinner-button-down {
            margin-right: .5em;
        }
    }
}

.x-android {
    .x-spinner-button {
        padding: .40em 0 .11em !important;
    }
}

// Ext.field.Select
.x-select-overlay {
    .x-list-item-label {
        height: 2.6em;
    }

    .x-item-selected {
        .x-list-label {
            margin-right: 2.6em;
        }

        .x-list-item-inner {
            &:before {
                @include checkmark(rgba(0,0,0,.3));
                margin-top: -.8em;
            }

            &:after {
                @include checkmark($form-light);
            }
        }
    }
}

.x-field-search {
    .x-field-input {
        position: relative;

        &:before {
            @include insertion(.86em, .86em, 50%, .5em);
            -webkit-mask-image: theme_image('default', "pictos/search.png");
            -webkit-mask-size: .86em;
            background-color: #ccc;
            -webkit-mask-repeat: no-repeat;
            margin-top: -0.43em;
        }
        .x-form-field {
            margin-left: 1em;
        }
    }
}

//clear icon
$form-clear-size: 2.2em;

.x-field-input {
    .x-clear-icon {
        background: theme_image('default', "clear_icon.png") no-repeat;
        background-position: center center;
        background-size: 55% 55%;
        width: $form-clear-size;
        height: $form-clear-size;
        margin: .5em;
        margin-top: -($form-clear-size/2);
        right: -.5em;
    }
}

.x-field-clearable {
    .x-field-input {
        padding-right: $form-clear-size;
    }
}

// Ext.form.FieldSet
.x-form-fieldset {
    margin: 0 0 1.5em;

    .x-form-label {
        border-top: 1px solid lighten($form-light, 20%);
    }

    .x-form-fieldset-inner {
        border: 1px solid $form-light;
        background: #fff;
        padding: 0;
        @if $include-border-radius {
            @include border-radius($form-fieldset-radius);
        }
    }

    //Ext.field.Field
    .x-field {
        border-bottom: 1px solid $form-light;
        background: transparent;

        &:first-child {
            @if $include-border-radius {
              @include border-top-radius($form-fieldset-radius);
            }
        }

        &:last-child {
            border-bottom: 0;

            @if $include-border-radius {
              @include border-bottom-radius($form-fieldset-radius);
            }
        }
    }
}

.x-form-fieldset-title {
    @include label();
    margin: 1em ( $form-spacing + .1em ) .3em;
    color: $form-dark;
}

.x-form-fieldset-instructions {
    @include label();
    color: lighten($form-dark, 30%);
    margin: 1em ( $form-spacing + .1em ) .3em;
    font-size: .8em;
}

// Ext.field.Select
.x-selectmark-base {
    @include insertion(1em, 1em, 50%, auto);
    right: ($form-spacing + .1em);
    -webkit-mask-size: 1em;
    -webkit-mask-image: theme_image('default', "pictos/arrow_down.png");
    margin-top: -.5em;
}

// Create the dropdown arrow
// for select fields
.x-field-select {
    position: relative;
    z-index: 1;

    .x-component-outer {
        &:after {
            @include selectmark($form-light);
        }

        &:before,
        &:after {
            pointer-events: none;
            position: absolute;
            display: block;
        }

        &:before {
            @include insertion(4em,auto,0,auto);
            right: 0;
            bottom: 0;

            @if $include-border-radius {
                @include border-right-radius($form-fieldset-radius);
            }
            @if $include-highlights {
                background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba($form-field-bg-color, 0)), color-stop(.5, rgba($form-field-bg-color, 1)));
            }
        }
    }
}
