/* @group @Variables - form */

:root {
--color-border-input: var(--gray-colors-90);
--color-border-input-search: var(--gray-colors-80);
--color-border-focus: var(--focus-primary);
--color-border-error: var(--error-primary);
--color-border-disabled: var(--gray-colors-90-disabled);
--color-border-search-disabled: var(--gray-colors-80-disabled);
}

/* @end @Variables - form */

/* @group @Variables - form */

:root {
--color-background-input: var(--gray-colors-100);
--color-background-select: var(--gray-colors-97);
--color-background-disabled: var(--gray-colors-95-disabled);
--color-background-disabled-checkbox: var(--gray-colors-100-disabled);
}

/* @end @Variables - form */

/* @group @Variables - form */

:root {
--color-checkbox: var(--gray-colors-90);
--color-checkbox-checked: var(--focus-primary);
--color-background-checkbox-checked-icon-border: var(--gray-colors-100);
}

/* @end @Variables - form */

/* form --------------------------------------------------------*/

/* @group @Variables - form */

:root {
--form-input-padding: calc(var(--form-spacing-small) - 1px);
--form-input-border: 1px solid var(--color-border-input);
--form-input-shadow: inset 0 0 0 1px var(--color-border-focus), inset -1px 1px var(--link-focus-shadow-size) var(--link-focus-shadow-color);
--form-input-error-shadow: inset 0 0 0 1px var(--color-border-error);
--form-input-checked-border: inset 0 0 0 1px var(--color-checkbox-checked);
}

/* @end @Variables - form */


/* @group @Variables - form */

:root {
--form-input-seacrh-padding: calc(var(--form-spacing-x-small) - 1px) calc((var(--form-spacing-small) * 5) - 1px) calc(var(--form-spacing-x-small) - 1px) calc(var(--form-spacing-small) - 1px);
--form-input-border-search: 1px solid var(--color-border-input-search);
}

/* @end @Variables - form */