:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select) {
    background: var(--color-input);
    color: var(--color-input-text);
    box-shadow: var(--shadow-input);
    border: var(--border-input);
    min-height: var(--height-input);
    padding: var(--padding-input);
    border-radius: var(--radius-input);
    min-width: var(--min-width-input);
    flex: 1 0 auto;
    appearance: none;
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):focus {
    background: var(--color-input-active);
    color: var(--color-input-active-text);
    box-shadow: var(--shadow-input-active);
    border: var(--border-input-active);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):hover {
    background: var(--color-input-hover);
    color: var(--color-input-hover-text);
    box-shadow: var(--shadow-input-hover);
    border: var(--border-input-hover);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):hover::placeholder {
    color: var(--color-input-hover-text);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):focus::placeholder {
    color: var(--color-input-focus-text);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select)::placeholder {
    color: var(--color-input-text);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat {
    background: var(--color-flat-input);
    color: var(--color-flat-input-text);
    box-shadow: var(--shadow-flat-input);
    border: var(--border-flat-input);
    border-radius: var(--radius-flat-input);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:focus {
    background: var(--color-flat-input-active);
    color: var(--color-flat-input-active-text);
    box-shadow: var(--shadow-flat-input-active);
    border: var(--border-flat-input-active);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:hover {
    background: var(--color-flat-input-hover);
    color: var(--color-flat-input-hover-text);
    box-shadow: var(--shadow-flat-input-hover);
    border: var(--border-flat-input-hover);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:hover::placeholder {
    color: var(--color-flat-input-hover-text);
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:focus::placeholder {
    color: var(--color-flat-input-focus-text);
}

.input-flat::placeholder {
    color: var(--color-flat-input-text);
}

/* ICONS */

input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator, input[type="search"]::-webkit-search-cancel-button {
    display: block;
    width: var(--size-input-icon);
    height: var(--size-input-icon);
    padding: 0;
    background: currentColor;
    -webkit-mask: var(--input-icon);
    mask: var(--input-icon);
    appearance: none;
}

input:is([type="date"]) {
    --input-icon: url("./icons/input-date.svg");
}

input:is([type="month"]) {
    --input-icon: url("./icons/input-month.svg");
}

input:is([type="week"]) {
    --input-icon: url("./icons/input-week.svg");
}

input:is([type="datetime-local"]) {
    --input-icon: url("./icons/input-datetime-local.svg");
}

input:is([type="time"]) {
    --input-icon: url("./icons/input-time.svg");
}

input:is([type="search"]) {
    --input-icon: url("./icons/search-delete.svg");
}

select {
    appearance: auto;
    position: relative;
    appearance: none;
}