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

// Private variables
$form-clear-size: 2.2em;

.x-field {
    padding: $form-spacing * 2;
    min-height: $form-field-height;

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

.x-textfield,
.x-textareafield,
.x-searchfield,
.x-pickerfield,
.x-numberfield {
    .x-body-el {
        border-bottom: 1px solid $foreground-color;

        &:before,
        &:after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 4px;
            background: $foreground-color;
        }

        &:after {
            left: 1px;
            right: 1px;
            background: $background-color;
        }
    }

    &.x-focused {
        .x-body-el {
            border-bottom-color: $base-color;

            &:before {
                background: $base-color;
            }

            &:after {
                left: 2px;
                right: 2px;
                bottom: 1px;
            }
        }
    }
}

.x-searchfield .x-body-el .x-input {
    padding-left: 14px;

    &::before {
        position: absolute;
        content: 's';
        top: 0;
        bottom: 0;
        left: 0;
        color: $secondary-text-color;
        text-align: left;
        // TODO: Use FontAwesome
        font-family: 'Pictos';
        font-size: 22px;
        line-height: 44px;
        padding-left: 7px;
    }
}

.x-input {
    .x-cleartrigger .x-icon-el {
        width: 20px;
        height: 20px;
        top: 50%;
        margin-right: 7px;
        margin-top: -10px;
        background: transparent;

        &::before {
            position: absolute;
            content: 'D';
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            color: $secondary-text-color;
            // TODO: Use FontAwesome
            font-family: 'Pictos';
            font-size: 22px;
        }
    }
}

.x-input-el {
    font-size: 16px;
    background: transparent;
    padding: .4em;
    min-height: $form-field-height;
    border-width: 0;
    -webkit-appearance: none;
    color: $primary-text-color;
    -webkit-text-fill-color: $primary-text-color !important;
}

.x-searchfield .x-input-el {
    padding: .4em .4em .4em 1em;
}

.x-ie .x-input-el {
    background: transparent;
}

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

.x-disabled ::-webkit-input-placeholder {
    color: $foreground-color;
}

.x-field.x-disabled .x-label-el {
    color: #aaa;
    &:after {
        color: #666 !important;
    }
}

.x-textfield,
.x-textareafield,
.x-searchfield,
.x-pickerfield,
.x-numberfield {
    &.x-disabled {
        .x-body-el {
            border-bottom-color: $secondary-color;

            &:before {
                background: $secondary-color;
            }
        }
    }
}

.x-toolbar {
    .x-field {
        padding: 5px;
    }
}

.x-pickerfield {
    .x-body-el .x-input {
        overflow: hidden;

        &::before {
            z-index: 5;
            content: '';
            position: absolute;
            right: -10px;
            bottom: -1px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid $foreground-color;
        }
    }

    &.x-disabled {
        .x-body-el .x-input {
            &::before {
                border-bottom-color: $secondary-color;
            }
        }
    }
}