/*
----------------------------------------
USWDS with settings overrides
----------------------------------------
Customize USWDS styles here or prevent USWDS utilities (custom HTML classes
scoped to a single CSS property) from being applied by setting 'output' to 'false'.
See https://designsystem.digital.gov/documentation/settings/ and
https://designsystem.digital.gov/utilities/.
*/

@use 'uswds-core' with (
  /* When the Webpack sass-loader compiles Sass into CSS, it doesn't update the
  font and image urls to be relative to the Sass entrypoint. For us, that's
  app/assets/stylesheets/uswds/styles.scss. The fonts and images are still
  in the uswds directory under node_modules. So, we specify the correct paths here.
   */
  $theme-font-path: '../../../../node_modules/@uswds/uswds/dist/fonts',
  $theme-image-path: '../../../../node_modules/@uswds/uswds/dist/img',
  // We set the background to a dark color so that the banner uses the dark theme,
  // but we override the background color with Tailwind "bg-gray-900" when we
  // create the banner.
  $theme-banner-background-color: 'blue-90',
  // 0.5 is the USWDS size token that represents 0.25rem or 4px
  $theme-focus-offset: 0.5,
  $theme-heading-line-height: 2,
  // "Normal" text should use "wide" width
  $theme-text-measure: 6,
  $flex-settings: (responsive: true),
  $flex-direction-settings: (responsive: true),
  $align-self-settings: (responsive: true),
  $justify-content-settings: (responsive: true),
  $theme-utility-breakpoints-custom: ('none-width': 0px),
  $theme-breadcrumb-min-width: 'none-width',

  // Disables mobile menu entirely as the admin area is not mobile friendly and
  // we don't want it to be collapsing into a vertical menu. Making the min width mobile
  // is the key setting for this as it defaults to desktop width size.
  $theme-header-min-width: 'mobile'
);
