/*
 * Most colors are defined in ranges where the core color is
 * in the middle (500). Lighter colors are 50 -> 400 and darker
 * are 600 -> 900.
 *
 * The scales are not all complete. Items yet to be defined on the scale default to pink to indicate to consumers
 * that they are not implemented. Where possible, avoid adding new colors to the scales.
 *
 */
/*
TODO(RD): I feel like we should do something like this, but does it make sense to put it in:
   - A variable?
   - A mixin?
   - A utility class?

$focusOutline: outline 4px $focusColor;
$focusBoxShadow: 0 0 0 4px $focusColor;
*/
.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__preHeader--2ntdm {
  background: #F2F2F6;
  position: relative;
  justify-content: flex-start;
  font-size: 14px;
  font-size: var(--ds-font-size-body2);
  line-height: 24px;
  line-height: var(--ds-line-height-body2);
  font-weight: 400;
  font-weight: var(--ds-font-weight-body2);
  color: #40354E;
}

.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__preHeader--2ntdm > strong {
  font-weight: 600;
}

.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__inner--1Rmxt {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__links--25ipl {
  padding: 12px 8px;
  text-align: right;
  flex: 1;
}

.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__link--ocwyh {
  display: inline-block;
  font-size: 16px;
  margin-left: 16px;
  text-decoration: none;
  color: #40354E;
}

.node_modules--redbubble-design-system-react-headerAndFooter-components-PreHeader-PreHeader__link--ocwyh:hover {
  text-decoration: underline;
}


/*# sourceMappingURL=design-system-header-logged-out.1253f.css.map*/