/*
    Base styles
    Non-code-outputting stylesheets required in every SCSS partial
*/
/*
    Color Palette

    This section is the only place where color codes should live;
    All other stylesheets should reference the color variables below.
    If you need to use a new color in the v1 namespace, submit it as
    an addition to v1.

 */
/*

    Color-related Functions

 */
/*

    Generate Colors

    For the purpose of generating tinted and shaded versions of base colors.

    Tint & Shade from Compass:
*/
/*
  tint: Mix a color with white.

  @access public
  @param {Color} $color - color to tint
  @param {Number} $percentage - percentage of `$color` in returned color
  @return {Color}
*/
/*
  shade: Mix a color with black

  @access public
  @param {Color} $color - color to shade
  @param {Number} $percentage - percentage of `$color` in returned color
  @return {Color}
*/
/*

  Improved versions of tint & shade:

*/
/*
  Slightly lighten a color - more accurate version of tint()
  Example: tint("#a20101", 90) --> #C12828

  @access public
  @param {Color} $color - color to tint
  @param {Number} $percentage - percentage by which to tint the given color.
  @return {Color}
 */
/*
  Slightly darken a color - more accurate version of shade()
  Example: shade("#a20101", 10) --> #830000

  @access public
  @param {Color} $color - color to shade
  @param {Number} $percentage - percentage by which to shade the given color.
  @return {Color}
 */
/*

  Length functions
  
 */
/*
    Relative pixels: express pixel-level measurements, automatically converted to rems. 
        Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px. 
        Generated style will read: `border-width: 0.3125rem`.
  */
/*
     Abstract colors

     These colors are building blocks, assigned to more
     semantically-named color variables.

     NOTE: Sass likes to be loosey-goosey and not require you to
     quote strings. This never ends well; quote them anyway.

 */
/* ------- NO COLOR LITERALS beyond this point! ------ */
/* Deprecated */
/* Neutrals */
/* Colloquial grey aliases */
/* use instead of black generally */
/*
    Interface palette

    Specific color roles, used throughout components. Components may
    also name their own color variables, based on role or usage but
    they should all be aliases of colors in this file.
 */
/* Text colors */
/* Graphical element colors */
/* State and status colors */
/* Links */
/* Focus */
/* Shadows */
/* Calculate a transparent black from an opacity value: */
/* Animation shadows */
/* ======================================================================= *
    Units & Measures

    $mod is the basic unit of measurement for most things.
    Define measures using the mod() function and a multiplier.

    Examples:
      margin-right: mod(0.5);
      padding-bottom: mod(4);
    ...but evangelize the use of a small number of standard measures

    * Variables, placeholders and mixins only
    * Always favor @include [mixin] over @extend [class or placeholder].
    * The basic unit of measure, the mod (module), is based on 1rem, which
      is almost universally defined in browsers as 16px.
 * ======================================================================= */
/*

  Mod: return a multiple of the base unit $mod

*/
/*
  Relative pixels: express pixel-level measurements, automatically converted to rems.
      Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px.
      Generated style will read: `border-width: 0.3125rem`.
*/
/* stylelint-disable unit-disallowed-list */
/* Use pixels for media queries. */
/* stylelint-enable unit-disallowed-list */
/* ======================================================================= *

    Typography

 * ======================================================================= */
/*
    Font-size scale: although the `$font-size-x` variables (below) cannot be generated from
    a list with Sass, this scale IS used to generate type utility classes.
 */
/*
    Font-size variables
    Number is pixel equivalent (assume `html {font-size: 16px}`)
*/
/* TODO: line-height should be set on body as (14 / 22) unitless.
   There are some feature styles that are using this 22px variable... */
/*
    List decoration styles:
 */
/*

  Layers

  Defines a named, fixed vocabulary of z-index values. Use `z` function to access.

  Usage: `.bingo:focus { z-index: z(focus); }`

  NOTE: only use a z-index if you absolutely need to!

 */
/* ======================================================================= *

    Effects

 * ======================================================================= */
/* =======================================================================

      Functions: Media Queries

      viewport-min() and viewport-max(). Use viewport-min() unless max is necessary.

*  ======================================================================= */
/**
 * viewport-min generates a media query applying to the given named breakpoint and all lower breakpoints.
 *
 * For example, `viewport-min(sm)` would apply to viewports 500px wide (the small breakpoint) and up. 
 *
 * Usage:
 * @include viewport-min('md') {
 *   -- styles for the medium breakpoint go here --
 * }
 *
 * @param  {String} $bp-name         The two-letter t-shirt size abbreviation of the breakpoint
 * @param  {Map} $breakpoint-set:    The set of breakpoints to use (default is the standard set
                                     defined in _units.scss)
 * @return {Sass}                    The media query, with the enclosed block of Sass included
 */
/**
 * viewport-max generates a media query applying to the given named breakpoint and all higher breakpoints.
 *
 * For example, `viewport-max(md)` would apply to viewports 700px wide (the medium breakpoint) and down. 
 * 
 * IMPORTANT: It is advised to take a "mobile-first" approach, and therefore to
 *            define styles at the minimum width first, then work your way up the breakpoints.
 *            Prefer **viewport-min()** over viewport-max(), unless it is absolutely needed.
 * 
 * Usage:
 * @include viewport-max('sm') {
 *   -- styles for the small breakpoint go here --
 * }
 *
 * @param  {String} $bp-name         The two-letter t-shirt size abbreviation of the breakpoint
 * @param  {Map} $breakpoint-set:    The set of breakpoints to use (default is the standard set
                                     defined in _units.scss)
 * @return {Sass}                    The media query, with the enclosed block of Sass included
 */
/*

    Color-related Functions

 */
/*

    Generate Colors

    For the purpose of generating tinted and shaded versions of base colors.

    Tint & Shade from Compass:
*/
/*
  tint: Mix a color with white.

  @access public
  @param {Color} $color - color to tint
  @param {Number} $percentage - percentage of `$color` in returned color
  @return {Color}
*/
/*
  shade: Mix a color with black

  @access public
  @param {Color} $color - color to shade
  @param {Number} $percentage - percentage of `$color` in returned color
  @return {Color}
*/
/*

  Improved versions of tint & shade:

*/
/*
  Slightly lighten a color - more accurate version of tint()
  Example: tint("#a20101", 90) --> #C12828

  @access public
  @param {Color} $color - color to tint
  @param {Number} $percentage - percentage by which to tint the given color.
  @return {Color}
 */
/*
  Slightly darken a color - more accurate version of shade()
  Example: shade("#a20101", 10) --> #830000

  @access public
  @param {Color} $color - color to shade
  @param {Number} $percentage - percentage by which to shade the given color.
  @return {Color}
 */
/*

  Length functions
  
 */
/*
    Relative pixels: express pixel-level measurements, automatically converted to rems. 
        Usage: `border-width: rpx(5)` => results in a 5px border if 1 rem = 16px. 
        Generated style will read: `border-width: 0.3125rem`.
  */
/*

  Layer functions

 */
/**
 * Given a layer name, return the corresponding z-index value.
 *
 * Usage:  `.bingo:focus { z-index: z(focus); }`
 *
 * @param  {String} $layer  A named z-layer on which to place an element.
 * @return {String}         A z-index value (numeric or 'auto').
 */
/* ---- Supply several property values based on icon size ---- */
/* ---- Legacy icon object: DEPRECATED ---- */
/* ---- Base icon object (embedded svg style) ---- */
/* =======================================================================

      Objects: Groups

*  ======================================================================= */
/* Deprecated: use line-layout() instead. */
/* =======================================================================

      Objects: Lists

*  ======================================================================= */
/*
    List-specific defaults:
*/
/*
    List-specific mixins:

    plain-list: Lists without bullets or left-padding.
    Indenting is added back for nested lists.
*/
/*
    bullet-list: Remove browser bullet style, add back via
    generated content. Allows for easy coloring/restyling of bullets,
    and flexible spacing of bullets and text.

    Note: offsets are relative to the left edge of the parent's content box.
*/
/* stylelint-disable no-empty-source */
/* =======================================================================

      Objects: Plain Button

*  ======================================================================= */
/*
  Between the default element styles and this mixin, all visual decoration
  is removed from the button, so you can use it to wrap arbitrary objects
  without affecting their appearance.
 */
/* =======================================================================

      Objects: Shapes

*  ======================================================================= */
/*
    Circle
*/
/*
    Square
*/
/* ========================================================== *

    Tools: Properties

    Mixins that lend characteristics to objects and components.

 * ========================================================== */
/*
    Standard block spacing
*/
/*
  fluid-img() - Responsive image sizing

  Applies to an image, svg, or other element with inherent height & width.

  The element will scale to the full width of its parent  (unless the inherent
  size of the element is smaller than that). Height will automatically scale to
  maintain the inherent aspect ratio of the image.
*/
/*

  Make an element horizontally flush with its container.
  Applied to a child element to overcomes its parent's
  horizontal padding.

  Standard padding is usually 16px. Specify a length to
  override the default.

 */
/*

  Extend an item's left & right edges a given amount out into
  its parent via negative marging, while adding an equal amount
  of padding to offset the difference.

 */
/*

  Make content invisible to the eye, but accessible by
  screen readers and other assistive tech.

  Uses several methods to make sure this happens in a
  performant way (i.e., don't create huge render areas, etc.)

  `!important` because it's used primarily as a utility class.

 */
/* stylelint-disable declaration-no-important */
/*
  Disable clickable things.
  */
/*
  Focus
*/
/*
  Apply `appearance` vendor prefixes

  Not a standard CSS property, so Autoprefixer doesn't apply.
 */
/*
  Theme Mixins

  -prepend-selector-chain - abstract base for "namespace"-type mixins.

  Breaks out of the current selector chain and prepends a selector.

  Don't use directly in component stylesheets; instead, use a special-purpose wrapper
  like `theme()`, below.

  @private
  @param $selector {String} - the selector to prepend onto the current selector chain.
      
  Usage:

  $selector is almost always a single class. This can be used to further qualify the selector chain by adding a class      
  to the _beginning_ of the chain. By default it will be bound to the current first item in the chain.
*/
/*doc
--- 
title: theme-mixin
name: theme-mixin
category: Mixins
---

Prepends a selector to the current selector chain. Any feature 
namespace, other body classes, or media queries will be preserved.

Helps keep a single source of truth for a key selector by
allowing theme styles to be nested _in context_ in the same block
as the base compoent or modifier.

Example, without the mixin:

To add a themed variant in this example, we have to break out of the nesting, 
then manually assert the theme class, feature namespace, component class, 
and pseudoclass, essentially duplicating the whole selector chain by hand,
which is prone to error.

```
.ns-flashcards { // topmost selector; could be on body or some page section.
  ...
  .c-gallery__image {
    border: rpx(4) solid $gray-e;

    &:hover {
      border-color: $gray-d;
    }
  }

  @at-root {
    .t-high-contrast.ns-flashcards .c-gallery__image:hover { // Ew.
      border-color: $dark-blue;
    }
  }
  ...
}
```

Now WITH the theme() mixin, we don't have to repeat selectors, and all the styles for 
.c-gallery__image are in one block (single source of truth). It's easier to understand
 the code, and the specificity is still as low as possible:

```
.ns-flashcards {
  ...
  .c-gallery__image {
    border: rpx(4) solid $gray-e;
    
    &:hover {
      border-color: $gray-d;

      @include theme('high-contrast') {
        border-color: $dark-blue;
      }
    }
  }
  ...
}

Resulting selector chain: 
.t-high-contrast.ns-flashcards .c-gallery-image:hover {...}
```

Note that the theme class is chained to the previously first element
in the chain, indicating that those two classes MUST be on the same element in order
for the styles to apply.

Use to include styles for a given theme class (e.g., 'vol', 'supersites', 'high-contrast').
The `.t-` prefix is added automatically.

This works only if we follow the convention of repeating the theme class on any library or
feature namespace element inside the body.

Usage example: 

```
.ns-flashcards {
  .c-card {
    display: inline-block;

    @include theme('supersites-jr') {
      background-color: $gray-9;
    }
  }
}
```

This code will be compiled to:

```
.ns-flashcards .c-card { display: inline-block; }

.t-supersites-jr.ns-flashcards .c-card { background-color: #999; }
```

And thus only affect the feature class when the selector chain is qualified by the theme class. The
benefit is that in the source file, all styles related to a component can be kept _with_ the component,
usually within a single block.
*/
/*doc
--- 
title: theme-opt-in
name: theme-opt-in-mixin
categerory: Mixins
--- 

Use for opting in a page fragment to a theme (rather than the entire page).

The theme-opt-in mixin is subtly different in that it puts a space between the theme
class and the rest of the selector:

```
.ns-open-ended-questions {
  .c-textarea {
    font-size: 1rem;

    @include theme-opt-in('supersites-jr') {
      font-size: var(--font-7);
    }
  }
}
```

This example generates the following CSS selector:

```
.t-supersites-jr .ns-open-ended-questions .c-textarea {...}
                ^ this space is the difference.
```

Now the theme class can stay on the body. This allows us to opt-in a subset
of the page without repeating the theme class.
*/
/* line 3, app/assets/stylesheets/zendesk_chat_widget.scss */
.c-unread-indicator {
  background: #000;
  background-color: #e54054;
  border-radius: 50%;
  box-shadow: 0 0 0 0.0625rem #cf2615;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  height: 1.25rem;
  left: unset;
  line-height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  position: absolute;
  right: 0.5rem;
  text-align: center;
  top: 0;
}

/* line 22, app/assets/stylesheets/zendesk_chat_widget.scss */
.c-zendesk-chat-widget-icon {
  bottom: 0.3125rem;
  height: 4rem;
  position: fixed;
  right: 0.3125rem;
  width: 4rem;
  z-index: 99999;
}

/* line 31, app/assets/stylesheets/zendesk_chat_widget.scss */
.c-zendesk-question-annotation {
  align-items: center;
  background-color: #1D2939;
  border: 0.125rem solid;
  border-radius: 50%;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

/* line 41, app/assets/stylesheets/zendesk_chat_widget.scss */
.c-zendesk-question-annotation svg {
  margin-top: 0.3125rem;
}