---
front-matter: yay
---

// CSS-Library
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/tokens/css/variables';

@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/_mixins.scss';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/site/_m-crisis-line.scss';

// needs to be imported before core
@import '_components/accordions';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/core';

@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/utilities';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/functions';

@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-action-link';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-additional-info';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-alert';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-breadcrumbs';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-button';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-dropdown';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-eyebrow';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-form-elements';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-hub-page-link-list';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-loading-indicator';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-megamenu';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-modal';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-nav-linklist';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-nav-sidebar';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-overlay';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-print';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/mobile-typography';
@import '../../../node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/shame';

// Site CSS
@import '_settings/variables';
@import '_helpers/clip';
@import '_helpers/media';
@import '_base/base';
@import '_layout/site-content';
@import '_layout/content-wrappers';
@import '_layout/metrics';
@import '_components/anchors';
@import '_components/badge';
@import '_components/code-snippets';
@import '_components/component-label';
@import '_components/component-checklist';
@import '_components/do-dont';
@import '_components/example';
@import '_components/fields';
@import '_components/footer';
@import '_components/header';
@import '_components/hero';
@import '_components/in-this-section';
@import '_components/iframe-preview';
@import '_components/link';
@import '_components/mobile-nav';
@import '_components/resource-links';
@import '_components/contributors';
@import '_components/search-results';
@import '_components/showcase';
@import '_components/sidenav';

.usa-skipnav {
  background: transparent;
  color: var(--vads-color-base);
  left: 0;
  padding: 0.625rem 0.9375rem;
  position: absolute;
  top: -2.625rem;
  transition: all 0.2s ease-in-out;
  z-index: 100;

  &:focus {
    background: var(--vads-color-white);
    left: 0;
    outline: 0;
    position: absolute;
    top: 0;
    transition: all 0.2s ease-in-out;
  }
}

.site-grid-example {
  padding:12px;
  background: #e1f3f8;
  border: 1px solid #07648d;
}

.site-section-highlight {
  padding-top: units(1);
  position: relative;

  &:before {
    content: "";
    position: absolute;
    width: units(10);
    display: block;
    top: units(3);
    height: 5px;
    background-color: #e31c3d;
  }

  a {
    background-color: transparent;
    text-decoration: none;
  }

  a:visited {
    color: var(--vads-color-link);
  }

  a:hover,
  a:focus {
    background-color: transparent;
    text-decoration: underline;
  }
}

.site-resources {
  background: #16171F;
}

/*
For the time being, we're manually overriding these two classes that get imported from Formation
because they get dynamically generated in color-palette-example.html. This is necessary because 
Formation still relies on the older --primary-darker/darkest naming convention for the sake of 
backwards compatibility. When Formation has been fully deprecated and we are on new utility classes, 
these can be removed along with an update to how classes are generated in color-palette-example.html. 
*/
.vads-u-background-color--primary-dark {
  background-color: var(--vads-color-primary-dark) !important;
}

.vads-u-background-color--primary-darker {
  background-color: var(--vads-color-primary-darker) !important;
}
