/* form text style
--------------------------------------------------------*/

/* @group @input - text / tel / email / textarea */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="date"],
input[type="password"],
textarea {
background-color: var(--color-background-input);
padding: var(--form-input-padding);
border: var(--form-input-border);
border-radius: var(--border-radius);
color: var(--primary-text-color);
transition: var(--transition-default);
}

:not(.has-error) input[type="text"]:focus,
:not(.has-error) input[type="email"]:focus,
:not(.has-error) input[type="number"]:focus,
:not(.has-error) input[type="tel"]:focus,
:not(.has-error) input[type="time"]:focus,
:not(.has-error) input[type="date"]:focus,
:not(.has-error) input[type="password"]:focus,
:not(.has-error) textarea:focus {
border-color: var(--color-border-focus);
box-shadow: var(--form-input-shadow);
}

.has-error input[type="text"],
.has-error input[type="email"],
.has-error input[type="number"],
.has-error input[type="tel"],
.has-error input[type="time"],
.has-error input[type="date"],
.has-error input[type="password"],
.has-error textarea {
border-color: var(--color-border-error);
box-shadow: var(--form-input-error-shadow);
}

:not(.has-error) input[type="text"]:disabled,
:not(.has-error) input[type="email"]:disabled,
:not(.has-error) input[type="number"]:disabled,
:not(.has-error) input[type="tel"]:disabled,
:not(.has-error) input[type="time"]:disabled,
:not(.has-error) input[type="date"]:disabled,
:not(.has-error) input[type="password"]:disabled,
:not(.has-error) textarea:disabled {
background: var(--color-background-disabled);
border-color: var(--color-border-disabled);
color: var(--disabled-text-color);
cursor: not-allowed;
}

input[type="tel"] {
width: calc(var(--font-size) * 10);
}


input[type="date"] {
width: calc(var(--font-size) * 8);
}

input[type="time"] {
width: calc(var(--font-size) * 4);
}

/* @end @input - text / tel / textarea */

/* @group @placeholder */

::-webkit-input-placeholder{font-size: var(--font-size-small);line-height: var(--lineheight-small);}
::-moz-placeholder{font-size: var(--font-size-small);line-height: var(--lineheight-small);}
::-ms-input-placeholder{font-size: var(--font-size-small);line-height: var(--lineheight-small);}
::placeholder{font-size: var(--font-size-small);line-height: var(--lineheight-small);}

input:disabled::-webkit-input-placeholder{opacity: var(--opacity-disabled);}
input:disabled::-moz-placeholder{opacity: var(--opacity-disabled);}
input:disabled::-ms-input-placeholder{opacity: var(--opacity-disabled);}
input:disabled::placeholder{opacity: var(--opacity-disabled);}

/* @end @placeholder */