@charset "UTF-8";
/**
 * This file houses styles specifically for the pattern library documentation.
 * All styles are namespaced by `EP_`. If you'd like to change this you can with
 * a global find and replace.
 *
 * These styles are not loaded on user facing pages.
 */
/**
 * We use the default prismjs theme for syntax highlighting, with a few minor
 * tweaks. You can override those defaults by editing this file. 🖌
 *
 * @see https://prismjs.com/
 */
/* stylelint-disable selector-no-vendor-prefix */
.EP_pattern__code {
  /* stylelint-enable */
  /* Code blocks */
  /* Inline code */ }
  .EP_pattern__code pre[class*="language-"]::-moz-selection,
  .EP_pattern__code pre[class*="language-"] ::-moz-selection,
  .EP_pattern__code code[class*="language-"]::-moz-selection,
  .EP_pattern__code code[class*="language-"] ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none; }
  .EP_pattern__code pre[class*="language-"]::selection,
  .EP_pattern__code pre[class*="language-"] ::selection,
  .EP_pattern__code code[class*="language-"]::selection,
  .EP_pattern__code code[class*="language-"] ::selection {
    background: #b3d4fc;
    text-shadow: none; }
  @media print {
    .EP_pattern__code code[class*="language-"],
    .EP_pattern__code pre[class*="language-"] {
      text-shadow: none; } }
  .EP_pattern__code pre[class*="language-"] {
    margin: 0.5em 0;
    overflow: auto;
    padding: 1em; }
  .EP_pattern__code :not(pre) > code[class*="language-"],
  .EP_pattern__code pre[class*="language-"] {
    background: #f5f2f0; }
  .EP_pattern__code :not(pre) > code[class*="language-"] {
    border-radius: 0.3em;
    padding: 0.1em;
    white-space: normal; }
  .EP_pattern__code .token.comment,
  .EP_pattern__code .token.prolog,
  .EP_pattern__code .token.doctype,
  .EP_pattern__code .token.cdata {
    color: slategray; }
  .EP_pattern__code .token.punctuation {
    color: #999; }
  .EP_pattern__code .namespace {
    opacity: 0.7; }
  .EP_pattern__code .token.property,
  .EP_pattern__code .token.tag,
  .EP_pattern__code .token.boolean,
  .EP_pattern__code .token.number,
  .EP_pattern__code .token.constant,
  .EP_pattern__code .token.symbol,
  .EP_pattern__code .token.deleted {
    color: #905; }
  .EP_pattern__code .token.selector,
  .EP_pattern__code .token.attr-name,
  .EP_pattern__code .token.string,
  .EP_pattern__code .token.char,
  .EP_pattern__code .token.builtin,
  .EP_pattern__code .token.inserted {
    color: #690; }
  .EP_pattern__code .token.operator,
  .EP_pattern__code .token.entity,
  .EP_pattern__code .token.url,
  .EP_pattern__code .language-css .token.string,
  .EP_pattern__code .style .token.string {
    background: rgba(255, 255, 255, 0.5);
    color: #9a6e3a; }
  .EP_pattern__code .token.atrule,
  .EP_pattern__code .token.attr-value,
  .EP_pattern__code .token.keyword {
    color: #07a; }
  .EP_pattern__code .token.function,
  .EP_pattern__code .token.class-name {
    color: #dd4a68; }
  .EP_pattern__code .token.regex,
  .EP_pattern__code .token.important,
  .EP_pattern__code .token.variable {
    color: #e90; }
  .EP_pattern__code .token.important,
  .EP_pattern__code .token.bold {
    font-weight: bold; }
  .EP_pattern__code .token.italic {
    font-style: italic; }
  .EP_pattern__code .token.entity {
    cursor: help; }

:root {
  --EP_border-radius: 0.5em;
  --EP_border-size: 1px; }

:root {
  --EP_color-light-grey: #f3f6fa;
  --EP_color-med-grey: #d8dfe7;
  --EP_color-dark-grey: #465369;
  --EP_color-text: #282f3c;
  --EP_color-white: #fff;
  --EP_color-black: #000;
  --EP_color-light-green: #e0f8ed;
  --EP_color-dark-green: #19724a;
  --EP_color-light-blue: #eef6ff;
  --EP_color-blue: #1369ec;
  --EP_color-dark-blue: #0e4080;
  --EP_color-light-red: #ffe7e7;
  --EP_color-dark-red: #cb2d23;
  --EP_color-success: #63cc37;
  --EP_color-danger: #cc6337; }

:root {
  /* System Fonts as used by GitHub */
  --EP_font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Monospace system fonts used by GitHub */
  --EP_font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }

/**
 * Shared custom properties for a default box shadow
 */
:root {
  --EP_shadow-color: rgba(0, 0, 0, 0.2);
  --EP_shadow-blur: 5px;
  --EP_shadow-offset: 2px;
  --EP_shadow-default:
    var(--EP_shadow-offset)
    var(--EP_shadow-offset)
    var(--EP_shadow-blur)
    var(--EP_shadow-color); }

:root {
  --EP_nav-height: 5rem;
  --EP_sidebar-width: 20rem;
  --EP_max-width: 40rem; }

:root {
  /**
   * Motion Duration Variables
   */
  --EP_duration-quick: 0.2s;
  --EP_duration-prompt: 0.3s;
  /**
   * Motion Easing Variables
   * from http://easings.net/
   *
   * "Easing out is typically the best for user interface work, because the
   *  fast start gives your animations a feeling of responsiveness, while
   *  still allowing for a natural slowdown at the end."
   * - http://bit.ly/choosing-the-right-easing
   */
  --EP_ease-normal-out: ease-out;
  /**
   * Standard Transition Combinations
   */
  --EP_transition-quick: var(--EP_ease-normal-out) var(--EP_duration-quick);
  --EP_transition-prompt: var(--EP_ease-normal-out) var(--EP_duration-prompt); }

.EP_button {
  background: var(--EP_color-light-grey);
  border: var(--EP_border-size) solid var(--EP_color-med-grey);
  border-radius: var(--EP_border-radius);
  color: var(--EP_color-dark-grey);
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  transition: background var(--EP_transition-prompt), border-color var(--EP_transition-prompt), color var(--EP_transition-prompt); }
  .EP_button:hover, .EP_button:focus {
    background: var(--EP_color-dark-grey);
    border-color: var(--EP_color-dark-grey);
    color: var(--EP_color-white); }

/**
 * Semantic card pattern based upon https://inclusive-components.design/cards/
 */
.EP_card {
  border: var(--EP_border-size) solid var(--EP_color-med-grey);
  border-radius: var(--EP_border-radius);
  overflow: hidden;
  position: relative;
  transition: transform var(--EP_transition-prompt); }
  @media (min-width: 50em) {
    .EP_card {
      display: flex; } }

.EP_card:hover,
.EP_card:focus {
  box-shadow: var(--EP_shadow-default);
  transform: translateY(-2px); }

.EP_card__content {
  padding: 1.5em; }

.EP_card__graphic {
  flex-shrink: 0;
  transition: transform var(--EP_transition-prompt); }

.EP_card__primary-action {
  color: var(--EP_color-text);
  text-decoration: none; }

.EP_card__primary-action::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.EP_card__secondary-action {
  position: relative;
  z-index: 1; }

.EP_label {
  background: var(--EP_color-light-grey);
  border-radius: var(--EP_border-radius);
  display: inline-block;
  margin-bottom: 0.25em;
  margin-right: 0.5em;
  padding: 0.5em 1em; }

.EP_label--wip {
  background: var(--EP_color-light-grey);
  color: var(--EP_color-dark-grey); }

.EP_label--approved {
  background: var(--EP_color-light-green);
  color: var(--EP_color-dark-green); }

.EP_label--archived {
  background: var(--EP_color-light-red);
  color: var(--EP_color-dark-red); }

.EP_label--patternready {
  background: var(--EP_color-light-blue);
  color: var(--EP_color-blue); }

.EP_layout {
  background: #fff;
  color: var(--EP_color-text);
  font-family: var(--EP_font-system);
  padding-top: var(--EP_nav-height); }

@media (min-width: 50em) {
  .EP_layout__main {
    display: flex; } }

.EP_sidebar {
  background: var(--EP_color-light-grey);
  display: none; }
  @media (min-width: 50em) {
    .EP_sidebar {
      display: block;
      flex: 0 0 auto;
      padding: 0.5em 0;
      width: var(--EP_sidebar-width); } }

.EP_sidebar__menu {
  list-style: none; }

.EP_sidebar__menu-item > * + * {
  margin-top: 1.5em; }

.EP_content {
  overflow: hidden;
  padding: 1.5em; }

.EP_header {
  background: var(--EP_color-white);
  box-shadow: 0 0 1px rgba(67, 90, 111, 0.47), 0 2px 4px -2px rgba(67, 90, 111, 0.3);
  position: fixed;
  top: 0;
  transition: transform var(--EP_transition-quick);
  width: 100%;
  z-index: 1; }
  @media (min-width: 50em) {
    .EP_header {
      align-items: center;
      display: flex;
      height: var(--EP_nav-height);
      justify-content: space-between;
      padding: 0 1.5em; } }

.EP_header-hidden .EP_header {
  transform: translateY(calc(var(--EP_nav-height) * -1.1)); }

.EP_nav {
  align-items: center;
  display: flex;
  height: var(--EP_nav-height);
  justify-content: space-between;
  padding: 0 1.5em;
  width: 100%; }
  @media (min-width: 50em) {
    .EP_nav {
      height: auto;
      padding: 0; } }

.EP_nav__logo {
  color: var(--EP_color-text);
  text-decoration: none; }

@media (min-width: 50em) {
  .EP_nav__menu-toggle {
    display: none; } }

.EP_nav__menu {
  background: var(--EP_color-white);
  left: 0;
  min-height: 100vh;
  overflow-y: auto;
  position: absolute;
  top: var(--EP_nav-height);
  width: 100%; }
  @media (min-width: 50em) {
    .EP_nav__menu {
      display: none; } }

.EP_nav__menu:not(.is-open) {
  display: none; }

.EP_nav__category {
  border-top: var(--EP_border-size) solid var(--EP_color-med-grey); }

.EP_nav__category:last-child {
  border-bottom: var(--EP_border-size) solid var(--EP_color-med-grey); }

.EP_nav__submenu-toggle {
  align-items: center;
  background: var(--EP_color-white);
  border: none;
  color: var(--EP_color-text);
  cursor: pointer;
  display: flex;
  font-size: 1.15em;
  font-weight: bold;
  justify-content: space-between;
  padding: 1.5rem;
  width: 100%; }

.EP_toggle-icon {
  color: var(--EP-color-text);
  transition: transform var(--EP_transition-prompt); }

.EP_nav__category.is-open .EP_toggle-icon {
  transform: rotate(180deg); }

.EP_nav__submenu,
.EP_nav__submenu-large {
  list-style: none; }

.EP_nav__submenu {
  background: var(--EP_color-light-grey);
  border-top: var(--EP_border-size) solid var(--EP_color-med-grey);
  display: none;
  padding: 0.5em 0; }

.EP_nav__category.is-open .EP_nav__submenu {
  display: block; }

.EP_nav__link {
  color: var(--EP_color-dark-grey);
  display: block;
  line-height: 1em;
  padding: 1em 1.5em;
  text-decoration: none; }

.EP_nav__link:hover,
.EP_nav__link:active {
  text-decoration: underline; }

.EP_nav__link-primary {
  color: var(--EP_color-text);
  font-size: 1.15em;
  font-weight: bold; }
  @media (min-width: 50em) {
    .EP_nav__link-primary {
      padding: 0 1rem; } }

.EP_nav__menu-large {
  display: none;
  list-style: none; }
  @media (min-width: 50em) {
    .EP_nav__menu-large {
      display: flex;
      margin: 0 calc(1rem * -1); } }

:root {
  --EP_nav-spacing: 1.5rem; }

/**
 * This is starting to get really meta...
 * A pattern for displaying patterns
 */
.EP_pattern {
  background: var(--EP_color-med-grey);
  padding: 0.5em; }

.EP_pattern__menu {
  list-style: none; }

.EP_pattern__example {
  background: #fff;
  color: initial;
  font-family: initial;
  padding: 1em; }

.EP_pattern__iframe {
  border: none;
  width: 100%; }

.EP_pattern__code {
  font-family: var(--EP_font-monospace);
  padding-top: 0.5em; }

/**
 * Creates an iframe preview at the size of an iPhone 6.
 * Helpful for showcasing prototypes
 */
:root {
  --EP_preview-width: 320px;
  --EP_preview-height: 568px; }

.EP_preview {
  display: block;
  height: calc(var(--EP_preview-height) / 4);
  overflow: hidden; }
  @media (min-width: 50em) {
    .EP_preview {
      height: calc(var(--EP_preview-height) / 2);
      width: calc(var(--EP_preview-width) / 2); } }

.EP_preview__iframe {
  border: none;
  object-fit: fill;
  pointer-events: none;
  width: 100%; }
  @media (min-width: 50em) {
    .EP_preview__iframe {
      height: var(--EP_preview-height);
      transform: scale(0.5);
      transform-origin: top left;
      width: var(--EP_preview-width); } }

.EP_u_list-reset {
  list-style: none; }

.EP_u_stagger-items > * + * {
  margin-top: 1em !important; }

body,
html {
  height: 100%; }