/* @group @variables */

[class*="a-input"] {
--height: 3rem;
--grid-template-columns: 1fr;
--padding: calc(.375rem - 1px) calc(.75rem - 1px);
}

[class*="a-textarea"] {
--height: 3.75rem;
--padding: calc(.375rem - 1px) calc(.75rem - 1px) calc(1.5rem - 1px);
}

/*[class*="a-input"]:not(:disabled):focus,
[class*="a-textarea"]:not(:disabled):focus,
[class*="a-input"]:not(:placeholder-shown),
[class*="a-textarea"]:not(:placeholder-shown) {
--padding: calc(1.125rem - 1px) calc(.75rem - 1px) calc(.375rem - 1px);
}*/

/* @end @variables */

/* @group @variables */

[class*="a-input"][type="date"] {
--grid-template-columns: 1fr auto;
}

[class*="a-input"][type="date"]::-webkit-calendar-picker-indicator {
--date-background-color: hsla(220, 5%, 50%, 1);
--date-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Eicon-calendar%3C/title%3E%3Cpath fill='hsl(220, 5%25, 50%25)' fill-rule='evenodd' d='M8.5 9h3v3h-3V9ZM13 9h3v3h-3V9Zm4.5 0h3v3h-3V9ZM4 18h3v3H4v-3Zm4.5 0h3v3h-3v-3Zm4.5 0h3v3h-3v-3Zm-4.5-4.5h3v3h-3v-3Zm4.5 0h3v3h-3v-3Zm4.5 0h3v3h-3v-3ZM4 13.5h3v3H4v-3ZM20.5 0v1.5h-3V0H7v1.5H4V0H1v24h22.5V0h-3ZM22 22.5H2.5V6H22v16.5Z'/%3E%3C/svg%3E");
--date-mask-size: contain;
--date-mask-position: center center;
--date-mask-repeat: no-repeat;
}

[class*="a-input"][type="date"]:focus::-webkit-calendar-picker-indicator {
--date-background-color: var(--color-form-checked);
}

/* @end @variables */


/* @group @variables */

[class*="a-input"],
[class*="a-textarea"] {
--background-color: var(--color-white);
--border-color: var(--color-very-light-gray);
--box-shadow: inset 0 0 0 1px transparent, 0 1px .375rem var(--color-very-light-gray);
}

[class*="a-input"]:not(:disabled):hover,
[class*="a-textarea"]:not(:disabled):hover{
--border-color: var(--color-form-checked);
--box-shadow: inset 0 0 0 1px transparent, 0 1px .375rem var(--color-very-light-gray);
}

[class*="a-input"]:not(:placeholder-shown):not(:empty),
[class*="a-input"]:not(:disabled):focus,
[class*="a-textarea"]:not(:placeholder-shown):not(:empty),
[class*="a-textarea"]:not(:disabled):focus {
--border-color: var(--color-form-checked);
--box-shadow: inset 0 0 0 1px var(--color-form-checked), 0 1px .375rem var(--color-very-light-gray);
}



/*[class*="a-input"]:not(:placeholder-shown),
[class*="a-textarea"]:not(:placeholder-shown) {
--padding: calc(1.5rem - 1px) calc(.75rem - 1px) calc(.375rem - 1px);
--background-color: var(--color-autofill-secondary);
}*/

[class*="a-input"]:not(:placeholder-shown):not(:empty),
[class*="a-textarea"]:not(:placeholder-shown):not(:empty) {
--background-color: var(--color-autofill-secondary);
}

[class*="has-error"] [class*="a-input"],
[class*="has-error"] [class*="a-textarea"]{
--border-color: var(--color-form-error);
--box-shadow: inset 0 0 0 1px var(--color-form-error), 0 1px .375rem var(--color-very-light-gray);
}

[class*="has-success"] [class*="a-input"],
[class*="has-success"] [class*="a-textarea"] {
--background-color: var(--color-success-secondary);
--border-color: var(--color-form-success);
--box-shadow: inset 0 0 0 1px var(--color-form-success), 0 1px .375rem var(--color-very-light-gray);
}

[class*="a-input"]:valid:not(:empty),
[class*="a-textarea"]:valid:not(:empty) {
--background-color: var(--color-success-secondary);
--border-color: var(--color-form-success);
--box-shadow: inset 0 0 0 1px var(--color-form-success), 0 1px .375rem var(--color-very-light-gray);
}

[class*="a-input"]:disabled,
[class*="a-textarea"]disabled {
--background-color: var(--color-input-disabled);
--color: var(--color-text-disabled);
}

/* @end @variables */


/* @group @variables */

[class*="a-input-login"],
[class*="a-input-login"]:not(:placeholder-shown):not(:empty),
[class*="a-input-login"]:not(:disabled):focus,
[class*="a-input-login"]:not(:placeholder-shown):not(:empty),
[class*="has-error"] [class*="a-input-login"],
[class*="has-success"] [class*="a-input-login"],
[class*="a-input-login"]:valid:not(:empty) {
--height: 3rem;
--padding: calc(.1875rem - 1px) calc(.75rem - 1px) calc(.1875rem - 1px) calc(.75rem - 1px);
}

/* @end @variables */

/* @group @variables */

[class*="a-input-password"],
[class*="a-input-password"]:not(:placeholder-shown):not(:empty),
[class*="a-input-password"]:not(:disabled):focus,
[class*="a-input-password"]:not(:placeholder-shown):not(:empty),
[class*="has-error"] [class*="a-input-password"],
[class*="has-success"] [class*="a-input-password"],
[class*="a-input-password"]:valid:not(:empty) {
--height: 3rem;
--padding: calc(.1875rem - 1px) calc(.75rem - 1px) calc(.1875rem - 1px) calc(.75rem - 1px);
}

/* @end @variables */

/* @group @a-input */

[class*="a-input"] {
box-sizing: border-box;
position: relative;
display: grid;
align-items: center;
grid-template-columns: var(--grid-template-columns);
height: var(--height);
padding: var(--padding);
background-color: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--box-shadow);
outline: none;
color: var(--color);
caret-color: var(--color);
transition: var(--transition);
}

[class*="a-textarea"] {
display: grid;
align-items: center;
min-height: 3.75rem;
padding: var(--padding);
background-color: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--box-shadow);
outline: none;
color: var(--color);
caret-color: var(--color);
transition: var(--transition);
}

/*[class*="a-input"]:-webkit-autofill,
[class*="a-textarea"]:autofill {
-webkit-text-fill-color: var(--color-brand);
text-fill-color: var(--color-brand-text);
caret-color: var(--color-text);
}

[class*="a-input"]:disabled,
[class*="a-textarea"]:disabled {
opacity: var(--alpha-disabled);
-webkit-text-fill-color: var(--color-text-disabled);
text-fill-color: var(--color-text-disabled);
}*/

/*[class*="a-input"]:not(:placeholder-shown),
[class*="a-input"]:focus,
[class*="a-textarea"]:not(:placeholder-shown),
[class*="a-textarea"]:focus {
padding-top: calc(1.5rem - 1px);
}*/

/* @end @a-input */

/* @group @reset date */

input[type="date"]::-webkit-inner-spin-button, 
input[type="date"]::-webkit-clear-button {
-webkit-appearance: none;
appearance: none;
display: none;
}

/* @end @reset date */

/* @group @a-input */

[class*="a-input"][type="date"]::-webkit-calendar-picker-indicator {
align-self: center;
grid-column: 2;
width: 1rem;
height: 1rem;
background: transparent;
background-color: var(--date-background-color);
-webkit-mask-image: var(--date-mask-image);
mask-image: var(--date-mask-image);
-webkit-mask-size: var(--date-mask-size);
mask-size: var(--date-mask-size);
-webkit-mask-position: var(--date-mask-position);
mask-position: var(--date-mask-position);
mask-repeat: var(--date-mask-repeat);
-webkit-mask-repeat: var(--date-mask-repeat);
cursor: pointer;
}
/* @end @a-input */