@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --input-height: var(--control-height-normal);
    --input-label-font-size: .875rem;
    --input-font-size: 16px;
    --input-background: #ffffff;
    --input-background-disabled: #f7f8fa;
    --input-color-disabled: #c9ccd6;
    --input-border-color: #c9ccd6;
    --input-border-color-hover: #adb0b8;
    --input-color: #161316;
    --input-box-shadow: rgba(201, 204, 214, 0.42);
    --input-prepend-background: #f8f8f8;
    --input-prepend-color: #191919;
    --input-append-background: #f8f8f8;
    --input-append-color: #191919;
    --input-required-color: #468cff;
    --input-invalid-color: #ad2a14;
    --input-valid-color: #4cad14;
    --input-border-radius: 6px;
}

.dark-side {
    --input-background: #2b2d30;
    --input-background-disabled: #2b2d30;
    --input-color-disabled: #333437;
    --input-border-color: #4e5157;
    --input-border-color-hover: #71757e;
    --input-color: #dfe1e5;
    --input-box-shadow: rgba(78, 81, 87, 0.43);
    --input-prepend-background: #4e5157;
    --input-prepend-color: #bac1cf;
    --input-append-background: #4e5157;
    --input-append-color: #bac1cf;
}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
textarea,
select,
.metro-input,
.file,
.input,
.textarea,
.select,
.tag-input,
.spinner,
.color-picker
{
    position: relative;
    border: 1px var(--input-border-color) solid;
    border-radius: var(--input-border-radius);
    color: var(--input-color);
    width: 100%;
    font-size: var(--input-font-size);
    height: var(--input-height);
    line-height: var(--input-height);
    background: var(--input-background) none;
    background-clip: padding-box;
    min-width: 0;
    padding: 0 8px;

    input {
        appearance: none;
        display: block;
        outline: none;
        width: 100%;
        min-width: 0;
        height: calc(var(--input-height) - 2px);
    }

    input {
        &::-ms-clear {
            display: none;
        }
        &::-ms-reveal {
            display: none;
        }
        &::-webkit-clear-button {
            display: none;
        }
        &::-webkit-inner-spin-button {
            height: 100%;
        }
    }

    &:focus {
        outline: none;
    }

    @media (hover: hover) {
        &:hover {
            border-color: var(--input-border-color-hover);
        }   
    }
    
    @media (hover: none) {
        &:active {
            border-color: var(--input-border-color-hover);
        }   
    }

    .input-clear-button, .input-reveal-button {
        .hide-element();

        &:active, &:focus, &:hover {
            .show-element();
        }
    }

    &:focus, &.focused, &:hover {
        .input-clear-button, .input-reveal-button {
            .show-element();
            visibility: visible;
        }
    }

    &:focus, &.focused {
        box-shadow: 0 0 0 3px var(--input-box-shadow);
    }

    &:disabled, &.disabled {
        pointer-events: none;
        border-color: var(--input-border-color);
        background-color: var(--input-background-disabled);
        color: var(--input-color-disabled);
    }

    &.hide-cursor {
        input {
            color: transparent;
            text-shadow: 0 0 0 var(--input-background);
        }
    }

    &.required {
        border: 1px var(--input-required-color) dashed !important;
        &:focus, &.focused {
            box-shadow: 0 0 0 3px var(--input-required-color)!important;
        }
    }

    &.invalid {
        border: 1px var(--input-invalid-color) solid !important;
        &:focus, &.focused {
            box-shadow: 0 0 0 3px var(--input-invalid-color)!important;
        }

        &::after {
            position: absolute;
            content: attr(data-exclaim);
            color: var(--input-invalid-color);
            left: -16px;
            top: 0;
            font-size: 1.625rem;
            font-weight: bold;
        }
    }

    &.valid {
        border: 1px var(--input-valid-color) solid !important;
        &:focus, &.focused {
            box-shadow: 0 0 0 3px var(--input-valid-color)!important;
        }
    }
    
    &.small {
        --input-height: var(--control-height-small);
        --input-font-size: 12px;
    }
    &.medium {
        --input-height: var(--control-height-medium);
        --input-font-size: 14px;       
    }
    &.large {
        --input-height: var(--control-height-large);
        --input-font-size: 16px;
    }
    &.largest {
        --input-height: var(--control-height-largest);
        --input-font-size: 20px;
    }
}


textarea {
    padding: 8px;
    font-size: var(--input-font-size);
}

textarea.metro-input {
    height: auto;
}

input[type=button], input[type=submit], input[type=reset] {
    width: auto;
}

.file, .input, .select, .textarea, .tag-input, .spinner, .color-picker {
    .prepend, .append {
        padding: 0 calc(var(--input-height) / 2);
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .prepend {
        background-color: var(--input-prepend-background);
        color: var(--input-prepend-color);
    }
    .append {
        background-color: var(--input-append-background);
        color: var(--input-append-color);
    }
}

.hidden-input {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.file, .input, .textarea, .select, .tag-input, .spinner, .rating, .color-picker {
    &:disabled, &.disabled {
        input, textarea, select, .select-input, .caption, .stars li {
            background: transparent;
            color: var(--input-color-disabled);
        }

        .button-group {
            display: none;
        }
    }
}

:is(.file, .input, .tag-input, .spinner, .rating, .color-picker):has( input:disabled) {
    pointer-events: none!important;
    .button-group {
        display: none;
    }
}
:is(.select):has( select:disabled) {
    pointer-events: none!important;
    .button-group {
        display: none;
    }
    .dropdown-caret {
        fill: var(--input-color-disabled);
    }
}
:is(.textarea):has( textarea:disabled) {
    pointer-events: none!important;
    button, .button, .button-group {
        display: none;
    }
}

.invalid_feedback {
    font-size: .9em;
    color: var(--input-invalid-color);
}

.custom-validation {
    input[required],
    select[required],
    textarea[required] {
        &:valid {
            border-color: var(--input-valid-color);
        }

        &:valid + .invalid_feedback {
            display: none;
        }

        &:invalid {
            border-color: var(--input-invalid-color);
        }

        &:invalid + .invalid_feedback {
            display: block;
        }
    }
}

.invalid_feedback {
    display: none;
}

.invalid + .invalid_feedback,
.invalid > .invalid_feedback {
    display: block !important;
}

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

::-webkit-search-results-button {
    -webkit-appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--input-background) inset;
    background-color: var(--input-background)!important;
    transition: background-color 5000s ease-in-out 0s;
}

::-webkit-input-placeholder {font-size: 14px}
::-moz-placeholder          {font-size: 14px}
:-moz-placeholder           {font-size: 14px}
:-ms-input-placeholder      {font-size: 14px}

input.rtl, input[dir=rtl] {
    direction: rtl;
}

.label-for-input {
    display: block;
    position: relative;
    font-weight: 600;
    font-size: var(--input-label-font-size, 14px);
}

.label-for-input.rtl {
    text-align: right;
}

input::placeholder {
    text-overflow:ellipsis;
    font-size: var(--input-font-size);
}
//input::-moz-placeholder     {text-overflow:ellipsis;}
//input:-moz-placeholder      {text-overflow:ellipsis;}