12345678910111213141516171819202122232425262728293031323334353637383940 |
- @use '../../tools' as *;
- @mixin input-base() {
- appearance: none;
- border-radius: theme('borderRadius.DEFAULT');
- color: theme('colors.text-context');
- background-color: theme('colors.surface-field');
- border: 1px solid theme('colors.border-field-default');
- @include more-contrast-interactive();
- &:hover {
- border-color: theme('colors.border-field-hover');
- }
- &[disabled],
- &[disabled]:hover {
- color: theme('colors.text-placeholder');
- background-color: theme('colors.surface-field-inactive');
- border-color: theme('colors.border-field-inactive');
- cursor: not-allowed;
- }
-
- .w-field--error > .w-field__input > &,
-
- .w-field--error > .w-field__input > * > &,
-
- &[aria-invalid='true'] {
- border-color: theme('colors.critical.200');
- }
- &::placeholder {
- color: theme('colors.text-placeholder');
- }
- }
|