@import "~cosmoUiVariables";
@import "../styles/variables";
@import "../styles/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;


.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);

    &[type=checkbox]{
        width: 14px;
    }
}



.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;
    }
}

.validationIcon {
    display: inline-block;
    width: 20px;
    height: 14px;
}

.validationIconValid {
    use {
        fill: $green;
    }
}

.validationIconError {
    use {
        fill: $red;
    }
}

.fieldLabel {
    display: flex;
    white-space: nowrap;
    font-size: 14px;
    align-items: center;
}

.hideCheckbox {
    input[type=checkbox] {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
    }
}

.svgBase {
    @extend .fieldLabel, .hideCheckbox;

    &::before{
        content: "";
        display: inline-block;

        height: 16px;
        width: 16px;

        border: 1px solid;
        margin-right:5px;
    }
}

.svgOn {
    @extend .svgBase;
    color: green;

    &::before {
        background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/icon-check.svg") no-repeat center center;
    }
}

.svgOff {
    @extend .svgBase;
    color: blue;
}

.svgDisabled {
    @extend .svgBase;
    color: grey;
}

.iconCheckboxBase {
    @extend .fieldLabel, .hideCheckbox;

}

.iconCheckboxOn {
    @extend .iconCheckboxBase;

    #background {
        fill: #d7f6cc;
    }
    #toggle {
        fill: #51d125;
    }
}

.iconCheckboxOff {
    @extend .iconCheckboxBase;

    #background {
        fill: #cde8f6;
    }
    #toggle {
        fill: #1d93d2;
    }
}

.iconCheckboxDisabled {
    @extend .iconCheckboxBase;

    #background {
        fill: #dedede;
    }
    #toggle {
        fill: #aeaeae;
    }
}