styles.scss

// 1. Load your project's USWDS settings configuration
@use 'uswds-core' as * with (
  $theme-font-path: '../../../../../../dist/fonts',
  $theme-image-path: '../../../../../../dist/img',
  $theme-hero-image: '../img/hero.jpg',

  // base colors
  $theme-color-base-family: 'gray',
  $theme-color-base-lightest: 'gray-3',
  $theme-color-base-lighter: 'gray-10',
  $theme-color-base-light: 'gray-20',
  $theme-color-base: 'gray-50',
  $theme-color-base-dark: 'gray-70',
  $theme-color-base-darker: 'gray-80',
  $theme-color-base-darkest: 'gray-warm-90',
  $theme-color-base-ink: 'gray-warm-90',

  // Primary colors
  $theme-color-primary-family: 'blue',
  $theme-color-primary-lightest: false,
  $theme-color-primary-lighter: 'blue-10',
  $theme-color-primary-light: 'blue-40',
  $theme-color-primary: 'blue-60',
  $theme-color-primary-vivid: 'blue-50v',
  $theme-color-primary-dark: 'blue-70',
  $theme-color-primary-darker: 'blue-80',
  $theme-color-primary-darkest: 'blue-90',

  // Secondary colors
  $theme-color-secondary-family: 'red',
  $theme-color-secondary-lightest: false,
  $theme-color-secondary-lighter: 'red-10v',
  $theme-color-secondary-light: 'red-20',
  $theme-color-secondary: 'red-40v',
  $theme-color-secondary-vivid: 'red-40v',
  $theme-color-secondary-dark: 'red-50',
  $theme-color-secondary-darker: 'red-60v',
  $theme-color-secondary-darkest: 'red-70',

  // Accent warm colors
  $theme-color-accent-warm-family: 'grey-warm',
  $theme-color-accent-warm-lightest: false,
  $theme-color-accent-warm-lighter: false,
  $theme-color-accent-warm-light: 'gray-warm-4',
  $theme-color-accent-warm: 'gray-warm-10',
  $theme-color-accent-warm-dark: 'gray-warm-20',
  $theme-color-accent-warm-darker: 'gray-warm-40',
  $theme-color-accent-warm-darkest: 'gray-warm-60',

  // Accent cool colors
  $theme-color-accent-cool-family: 'blue-cool-vivid',
  $theme-color-accent-cool-lightest: 'blue-cool-5v',
  $theme-color-accent-cool-lighter: 'blue-cool-10v',
  $theme-color-accent-cool-light: 'blue-cool-20',
  $theme-color-accent-cool: 'blue-cool-30v',
  $theme-color-accent-cool-dark: 'blue-cool-40v',
  $theme-color-accent-cool-darker: 'blue-cool-50v',
  $theme-color-accent-cool-darkest: 'blue-cool-60v',

  // body text color
  $theme-text-color: 'gray-cool-90',

  // layout grid
  $theme-grid-container-max-width: 'desktop-lg',
  $theme-banner-max-width: 'desktop-lg',
  $theme-header-max-width: 'desktop-lg',
  $theme-header-min-width: 'none',
  $theme-identifier-max-width: 'desktop-lg',
  $theme-footer-max-width: 'desktop-lg',

  // usa banner
  $theme-banner-background-color: 'blue-warm-80',

  // typography
  $theme-font-role-heading: 'sans',

  // sizing
  $theme-site-margins-width: 2,

  // utilities settings
  $display-settings:
    (
      responsive: true,
    ),

  $height-settings: (
    responsive: true,
  ),

  $overflow-settings: (
    responsive: true,
  ),

  $text-align-settings: (
    responsive: true,
  ),

  $position-settings: (
    responsive: true,
  ),

  $right-settings: (
    responsive: true,
  ),

  $background-color-palettes: (
    'palette-color-system-mint-medium',
    'palette-color-system-green-cool-vivid',
    'palette-color-system-red-cool-vivid',
    'palette-color-system-red-vivid'
      // no trailing comma,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
  ),

  $border-color-palettes: (
    'palette-color-system-green-cool',
    'palette-color-system-red-vivid',
    'palette-color-system-gray-cool'
      // no trailing comma,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
  ),

  $top-palettes: (
    'palette-units',
  ),

  $bottom-palettes: (
    'palette-units-system-positive',
  ),

  $right-palettes: (
    'palette-units',
  ),

  $theme-utility-breakpoints: (
    'tablet-lg': true,
  )
);

// 2. Load USWDS source code
@forward 'uswds';

// 3. Load any custom SASS

/* Custom utilities classes */

// Flex

.flex-shrink-0 {
  flex-shrink: 0;
}

// text styling
.text-capitalize {
  text-transform: capitalize;
}
.text-break-all {
  word-break: break-all;
}
.text-ellipsis {
  @include u-overflow('hidden');
  @include u-text('no-wrap');
  @include u-display(
    'block'
  ); // Use flex display on parent for inline elements.
  text-overflow: clip;
  text-overflow: ellipsis;
}
.text-underline-offset {
  text-underline-offset: 0.7em;
}

/* Custom selector styles */

// NavGlobal
#nav-global {
  background: color('blue-60')
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 80%);

  @include at-media('tablet') {
    box-shadow: 0 units(0.5) units(0.5) rgba(0, 0, 0, 0.2);
  }
  .nav-product {
    gap: 0.5rem;
    transition: border 200ms ease-out;

    // Only apply hover class to “non-active” product links
    &:not(.nav-product-active):hover,
    &:not(.nav-product-active):focus {
      border-bottom-color: color('blue-30v');
    }
  }

  .cloud-logo {
    width: 28px;
    @include at-media('mobile-lg') {
      width: inherit;
    }
  }
}

// UsersActionsSpaceRole
.users-actions-space-role label {
  @include at-media('tablet') {
    margin-top: 0;
  }
}

// Removes the 'X' from Chrome search inputs
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  display: none;
}

// USWDS Table Components

$table-border: 1px solid color('gray-20');
$table-sort-active-color: color('blue-cool-5v');
// Can't override these styles with utility classes
.usa-table {
  // Let’s make our tables expand to fill their container
  thead th {
    background: color('gray-warm-4'); // .bg-accent-warm-light
    border: none; // .border-0
    border-bottom: $table-border;
    padding: units(0.5) units(1);
  }
  // Default padding for table headings/cells.
  tbody th,
  td {
    padding: units(0.5) units(1);
  }
  // Borders for our in-tbody table headers.
  tbody th,
  tbody tr td:first-child {
    border-bottom: $table-border;
    border-right: $table-border;
    border-left: $table-border;
    border-top: none;
  }
  // Table cells (td) only need a bottom border.
  td {
    border: 0;
    border-bottom: $table-border;
  }
  // …unless they’re the last cell in the row.
  td:last-child {
    border-right: $table-border;
  }
  // when actively sorted
  @include at-media('mobile-lg') {
    td.active {
      background-color: $table-sort-active-color;
    }
    // Actively sorted
    th.active {
      background-color: $table-sort-active-color;
    }
  }
}

.usa-table--stacked {
  // On smaller screens, we can undo most of the border/padding rules above.
  @include at-media-max('mobile-lg') {
    border-collapse: separate;
    border-spacing: 0 2em;

    tr th,
    tbody tr td:first-child {
      border-top: units(0.5) solid color('gray-cool-20') !important;
      border-bottom: 0;
    }

    tbody th,
    td {
      border-left: $table-border;
      border-right: $table-border;
      padding: units(1);
    }
    tbody th,
    td:not(:last-child) {
      border-bottom: none;
    }
  }
}

// Org selector component
$timing-dropdown: 0.2s;

.orgs-selector {
  &[aria-expanded='true'] {
    box-shadow: 0 2px 8px 0 rgba(color('gray-cool-30'), 0.5);

    .usa-button-expand {
      transform: rotate(180deg);
    }
  }

  .usa-button-expand {
    transition: transform $timing-dropdown ease;
  }

  &__header {
    padding-top: calc(units(1.5) / 2); // 6px
    padding-bottom: calc(units(1.5) / 2);
    @include at-media('desktop') {
      padding-top: units(1); // 8px
      padding-bottom: units(1);
    }
  }

  &__list {
    scrollbar-width: thin;
  }
}

// OverlayDrawer

body:has(dialog.overlayDrawer[open]) {
  overflow: hidden; // prevents scrolling outside of dialog
}

// OverlayDrawer Animations
// From MDN - Animating Dialogs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs

$timing-dialog: 0.2s;

// Open state of the dialog
dialog.overlayDrawer[open] {
  left: initial;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0;
}

// Closed state of the dialog
dialog.overlayDrawer {
  left: initial;
  opacity: 1;
  transform: translateX(100%);
  transition-delay: calc(var($timing-dialog) / 2);
  transition:
    transform $timing-dialog ease-in,
    overlay $timing-dialog ease-in allow-discrete,
    display $timing-dialog ease-in allow-discrete;
}

// Before-open state
// Needs to be after the previous dialog[open] rule to take effect,
// as the specificity is the same
@starting-style {
  dialog.overlayDrawer[open] {
    transform: translateX(100%);
    transition-delay: 0;
  }
}

dialog.overlayDrawer::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition-delay: calc(var($timing-dialog) / 2);
  transition:
    display $timing-dialog allow-discrete,
    overlay $timing-dialog allow-discrete,
    background-color $timing-dialog;
}

dialog.overlayDrawer[open]::backdrop {
  background-color: rgb(0 0 0 / 70%);
}

@starting-style {
  dialog.overlayDrawer[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

// USA Checkbox

.usa-checkbox {
  background: initial; // removes white bg provided by USWDS
}

.usa-checkbox__label::before {
  background: initial;
  box-shadow: 0 0 0 2px color('primary');
}

// primary color #2C608A

// USA Alerts

$success-color-light: 'green-cool-5v';
$success-color-dark: 'green-cool-50';
$error-color-light: 'red-cool-10v';
$error-color-dark: 'red-40v';

.usa-alert .usa-alert__body {
  max-width: none;
}

.usa-alert .usa-alert__body h4 {
  @include u-font-size('sans', 'md');
  margin-bottom: units(2px);
}

.usa-alert--success {
  @include u-bg($success-color-light);
  border-left-color: color($success-color-dark);

  .usa-alert__body {
    @include u-bg($success-color-light);

    &:before {
      @include u-bg($success-color-dark); // icon color
    }
  }
}

.usa-alert--error {
  @include u-bg($error-color-light);
  border-left-color: color($error-color-dark);

  .usa-alert__body {
    @include u-bg($error-color-light);

    &:before {
      @include u-bg($error-color-dark); // icon color
    }
  }
}

// ProgressBar

.progress__bg--infinite {
  background: linear-gradient(
    90deg,
    color('blue-cool-20v') 78.42%,
    color('blue-cool-30v') 100%
  );
}

.progress__infinity-logo {
  position: absolute;
  top: -9px;
  right: 0;
  width: 28px;
  height: 28px;
  background: color('blue-cool-5v');
  border: 2px solid color('blue-cool-30v');
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}