@import "~cosmoUiVariables";
@import "../variables";
@import "../mixins/paddings";

// field
$form-field-outline: 0 !default;
$form-field-background-color: transparent !default;
$form-field-border-sizing: border-box !default;
$form-field-height: 29px !default;
$form-field-font-size: 14px !default;
$form-field-font-color: $gray-dark !default;
$form-field-padding-x: 12px !default;
$form-field-width: 100% !default;

//border
$form-field-border-top: $border-none !default;
$form-field-border-bottom: $border-light !default;;
$form-field-border-left: $border-none !default;
$form-field-border-right: $border-none !default;
$form-field-border-radius: 0% !default;

//error text
$form-error-text-font-size: 11px;
$form-error-height: 22px;
$form-error-padding: 4px;

//label
$form-label-color: $gray !default;
$form-label-font-size: 11px !default;
$form-label-padding-bottom: 0px;

// group
$form-group-width: 100%;
$form-group-padding-bottom: 6px;


.group {
    width: $form-group-width;
}

.label {
    padding-bottom: $form-label-padding-bottom;
    color: $form-label-color;
    font-size: $form-label-font-size;
}

.fieldset {
    border: none;
    padding: 0;
}

.field {
    box-sizing: $form-field-border-sizing;
    border-top: $form-field-border-top;
    border-bottom: $form-field-border-bottom;
    border-left: $form-field-border-left;
    border-right: $form-field-border-right;
    border-radius: $form-field-border-radius;
    font-size: $form-field-font-size;
    color: $form-field-font-color;
    height: $form-field-height;
    background-color: $form-field-background-color;
    width: $form-field-width;
    @include padding-x($form-field-padding-x);
}

.disabled {
    //color: $gray-light;
    background-color: $gray-light;
}
.select {
    background: #fff url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png') no-repeat;
    background-size: 20px;
    background-position:  right 10px center;
    appearance: none;
}

.errorText {
    min-height: $form-error-height;
    @include padding-y($form-error-padding);
    font-size: $form-error-text-font-size;
    color: $brand-danger;
}

button:focus, select:focus, input:focus, textarea:focus {
    outline: $form-field-outline;
}

.datetime {
    &::-webkit-inner-spin-button {
        display: none;
    }
}