@tailwind base;
@tailwind components;
@tailwind utilities;

/***********************************************************************************************************************
  This styles rails wrapping of input with validation errors in <div class='field_with_errors'/>
  B/c styles are wrapped, it can break layout. Assigning w-full seems to fix the often shrunk elements.
  Alternative solution is to remove wrapping using ActionView::Base.field_error_proc

  @see https://github.com/baoagency/polaris_view_components/pull/188
  @see https://stackoverflow.com/questions/12252286/how-to-change-the-default-rails-error-div-field-with-errors
*/
.field_with_errors { @apply w-full; }
.field_with_errors label {}
.field_with_errors input:not(.silent), .field_with_errors textarea:not(.silent), .field_with_errors select:not(.silent) {
  @apply w-full border-red-600 border-2;
}
/**********************************************************************************************************************/

input::placeholder {
}

input:focus::placeholder {
  opacity: 0;
}

[type='checkbox'] {
  &[disabled] {
  }
}