@layer
  reset,
  fonts,
  typography,
  base,
  layout,
  flow,
  patterns,
  page,
  toast,
  overrides;

@import url("reset.css") layer(reset);
@import url("fonts.css") layer(fonts);
@import url("typography.css") layer(typography);
@import url("page.css") layer(page);
@import url("toast.css") layer(toast);

@layer base {
  body {
    color: var(--rh-color-text-primary-on-light, #151515);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--rh-font-weight-heading-medium, 500);
  }

  a {
    color: var(--rh-color-interactive-blue-darker, #0066cc);
  }

  a:hover {
    color: var(--rh-color-interactive-blue-darkest, #003366);
  }

  a:visited {
    color: var(--rh-color-interactive-purple-darker, #5e40be);
  }

  hr {
    border-block-start:
      var(--rh-border-width-sm, 1px)
      solid
      var(--rh-color-border-subtle-on-light, #c7c7c7);
    border-inline: none;
    border-block-end: none;
    margin-block-end: var(--rh-space-2xl, 32px);
  }

  figure > img {
    max-width: 100%;
  }

  figcaption {
    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
  }
}

@layer layout {
  /* layout styles here */
}

@layer flow {
  /* flow styles here */
}

@layer patterns {
  /* Screen reader only style */
  .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
    -webkit-clip-path: inset(50%) !important;
      clip-path: inset(50%) !important;  /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;            /* 3 */
  }
  
  /*
    Use in conjunction with .sr-only to only display content when it's focused.
    @note Useful for skip links 
    @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
    @note Based on a HTML5 Boilerplate technique, included in Bootstrap
    @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
      @author Sylvain Pigeard
      @see https://github.com/twbs/bootstrap/issues/20732
  */
  .sr-only-focusable:focus,
  .sr-only-focusable:active {
    clip: auto !important;
    -webkit-clip-path: none !important;
      clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
  }
}

@layer overrides {
  rh-tooltip {
    cursor: pointer;
  }

  rh-button::part(button) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rh-space-xs, 4px);
    font-size: var(--rh-font-size-code-sm, 0.875rem);
  }

  rh-alert {
    min-width: 320px;
  }
}