/* This file contains styles for text input and textarea */
:where(input:not([type='checkbox'], [type='radio']), textarea) {
  padding: var(--space-2x) var(--space-4x);
  display: block;
  width: 100%;
  line-height: 22px;
  border-radius: var(--border-radius-primary);
}

/* 
** :where selector does not work with pseudo-elements. 
** This has, however, a low specificity which will be overriden when there is a class in the selector.   
*/
input::placeholder,
textarea::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
}

input[disabled]::placeholder,
textarea[disabled]::placeholder {
  color: var(--color-text-disabled);
}

/* 
** This is because by default all placeholders in Firefox have an opacity value applied to them. 
** https://css-tricks.com/almanac/selectors/p/placeholder/
*/
::-moz-placeholder {
  opacity: 1;
}

:where(input:not([type='checkbox'], [type='radio']).large) {
  padding: var(--space-4x) var(--space-6x);
  font-size: 1rem;
}