/**
* @stylesheet avatars.less Avatars
* @parent styles-viewer 1
*
* Avatars are used to represent both the guide and the client throughout A2J interviews in the Viewer application.
*
* Avatars are added programmatically using javascript so that are displayed inline, rather than loaded in using
* `<img>` or `<object>` tags. Being loaded in inline makes them easier to style, but was a necessity to support Edge
* and IE11, where we were experiencing an issue loading them as <object> tags (shrinking and adding scroll bars
* to the <object> tag and then making the SVG disappear when clicked on).
*
* The avatars were created in Adobe Illustrator (minimizing shapes and creating transparent paths for
* shading/lightening), then optimized using SVGo (https://jakearchibald.github.io/svgomg/), and classes
* cleaned up, refined, and added using a code editor. This outputs smaller, cleaner SVGs. If you want to
* see the SVGs, inspect the code below, or navigate to the images folder for this demo – 
* demos/avatars/images/
*
*
* @iframe demos/avatars/demo.html 600
*
**/

/**
* @styles courthouse Courthouse
* @parent avatars.less 2
*
* The courthouse is an SVG but is loaded in as an image since we will not be needing access to change its styles.
*
* @demo demos/avatars/courthouse.html
*
**/

/**
* @styles skin-tone Changing Avatar Skin Tone
* @parent avatars.less 3
*
* A2J's `avatars.less` file contains several variables for customizing the look of the avatars. These include
* the skin tone, shirt/tie color, and hair color. The ability to change hair color is discussed in a later section on this page.
* At this time there are no plans to change the avatars clothes color, but classes have been added if that
* becomes needed. Current variables and values are:
* ```
// skin tones
@@skin-lighter: #f6cab5;
@@skin-light: #e6ab89;
@@skin-medium: #c48f66;
@@skin-dark: #ad7247;
@@skin-darker: #764f38;

// base guide avatar colors
@@guide-hair-color: #231f20;
@@guide-shirt-color: #5bc0de;
@@guide-suit-color: #939598;
@@guide-button-color: #818285;
@@guide-pant-color: #939598;
@@guide-shoe-color: #161616;

// base user avatar colors
@@client-hair-color: #2C1B04;
@@client-female-shirt-color: #607077;
@@client-male-shirt-color: #5e5b69;
@@client-pant-color: #b6b19b;
@@client-male-shoe-color: #603913;
@@client-female-shoe-color: #5e7077;
```
*
* The avatar skin tone is dynamically set by JavaScript based on a selection of the Author in the interview.
* The JavaScript takes the data for the skin tone and applies it directly to the SVG file itself as a classname.
* For example, the SVG file `avatar-male-left.svg` contains the following classname `skin-darker` by default.
* Changing this classname to any of the above will alter the skin tone:
*
* Each file needs to have a classname set on the `<svg>` element of either `avatar-guide` or `avatar-user`
* along with a gender, `avatar-male` or `avatar-female`, and default skin tone classname like `skin-darker`, and hair color like `hair-brown-dark`.
* For example:
*
* ```
* <svg xmlns="http://www.w3.org/2000/svg" id="Guide-Male-Left" class="avatar-guide avatar-female skin-darker hair-brown-dark"
* viewBox="0 0 250.5 757.6"> ... </svg>
* ```
*
* @iframe demos/avatars/skin.html 600
*
**/

/**
* @styles hair-color Changing Avatar Hair Color
* @parent avatars.less 4
*
* A2J's `avatars.less` file contains several variables for customizing the look of the avatars. These include
* the skin tone, shirt/tie color, and hair color. The ability to change hair color will come in a later branch.
* At this time there are no plans to change the avatars clothes color, but classes have been added if that
* becomes needed. Current variables and values are:
* ```
// hair colors
@@hair-blonde: #f4bc6d;
@@hair-red: #eb732e;
@@hair-brown-light: #7e4e2e;
@@hair-brown-medium: #482516;
@@hair-brown-dark: #231f20;
@@hair-gray-dark: #8e8e8e;
@@hair-gray-light: #d1d1d1;
@@hair-bald: transparent;

// Applying hair colors
.hair-blonde .hair-color       {fill: @hair-blonde;}
.hair-red .hair-color          {fill: @hair-red;}
.hair-brown-light .hair-color  {fill: @hair-brown-light;}
.hair-brown-medium .hair-color {fill: @hair-brown-medium;}
.hair-brown-dark .hair-color   {fill: @hair-brown-dark;}
.hair-gray-dark .hair-color    {fill: @hair-gray-dark;}
.hair-gray-light .hair-color   {fill: @hair-gray-light;}
.hair-bald .hair-color, &.hair-bald .hair-lighten, &.hair-bald .hair-shade {
  display: none;
}
```
*
* The Guide avatar hair color is dynamically set by JavaScript based on a selection of the Author in the interview.
* The JavaScript takes the data for the hair color and applies it directly to the SVG file itself as a classname.
* For example, the SVG file `avatar-male-left.svg` contains the following classname `hair-brown-dark`.
* Changing this classname to any of the above will alter the hair color.
*
*
* @iframe demos/avatars/hair.html 600
*
**/

// skin colors
@skin-lighter: #f6cab5;
@skin-light: #e6ab89;
@skin-medium: #c48f66;
@skin-dark: #ad7247;
@skin-darker: #764f38;

// hair colors
@hair-blonde: #f4bc6d;
@hair-red: #eb732e;
@hair-brown-light: #7e4e2e;
@hair-brown-medium: #482516;
@hair-brown-dark: #231f20;
@hair-gray-dark: #8e8e8e;
@hair-gray-light: #d1d1d1;
@hair-bald: transparent;

// base guide avatar colors
@guide-hair-color: #231f20;
@guide-shirt-color: #5bc0de;
@guide-suit-color: #939598;
@guide-button-color: #818285;
@guide-pant-color: #939598;
@guide-shoe-color: #161616;

// base user avatar colors
@client-hair-color: #2C1B04;
@client-female-shirt-color: #607077;
@client-male-shirt-color: #5e5b69;
@client-pant-color: #b6b19b;
@client-male-shoe-color: #603913;
@client-female-shoe-color: #5e7077;

// blanket on wheelchair avatars
.blanket-color {
  fill:#FFFFFF;
}
// To remove blanket from wheelchair avatars
// .blanket-color {
//   display: none;
// }
// .blanket-shade {
//   display: none;
// }

// wheelchair styling
.wheelchair-dary-gray {
  fill:#424450;
}
.wheelchair-light-gray {
  fill:#C0C6D9;
}
.wheelchair-med-gray {
  fill:#595B67;
}
.wheelchair-wheels {
  fill:#C6C7C1;
}
.wheelchair-blue {
  fill:#1F5074;
}

.avatar-guide, .avatar-user {
  z-index: 10;
  width: 22%;
  height: auto;
  &.in-wheelchair {
    width: 44%;
  }
}

svg.avatar-guide {
  float: right;
  background-color: transparent !important;

  .shirt-color {
    fill: @guide-shirt-color !important;
  }
  .suit-color {
    fill: @guide-suit-color !important;
  }
  .button-color {
    fill: @guide-button-color !important;
  }
  .pant-color {
    fill: @guide-pant-color !important;
  }
  .shoe-color {
    fill: @guide-shoe-color !important;
  }

  &.skin-lighter {
    .skin-color {
      fill: @skin-lighter !important;
    }
  }
  &.skin-light {
    .skin-color {
      fill: @skin-light !important;
    }
  }
  &.skin-medium {
    .skin-color {
      fill: @skin-medium !important;
    }
  }
  &.skin-dark {
    .skin-color {
      fill: @skin-dark !important;
    }
  }
  &.skin-darker {
    .skin-color {
      fill: @skin-darker !important;
    }
  }

  &.hair-blonde .hair-color       {fill: @hair-blonde;}
  &.hair-red .hair-color          {fill: @hair-red;}
  &.hair-brown-light .hair-color  {fill: @hair-brown-light;}
  &.hair-brown-medium .hair-color {fill: @hair-brown-medium;}
  &.hair-brown-dark .hair-color   {fill: @hair-brown-dark;}
  &.hair-gray-dark .hair-color    {fill: @hair-gray-dark;}
  &.hair-gray-light .hair-color   {fill: @hair-gray-light;}
  &.hair-bald .hair-color, &.hair-bald .hair-lighten, &.hair-bald .hair-shade {
      display: none;
  }
}

.avatar-user {

  .hair-color {
    fill: @client-hair-color
  }

  &.avatar-male{
    .shirt-color {
      fill: @client-male-shirt-color !important;
    }
    .shoe-color {
      fill: @client-male-shoe-color !important;
    }
  }
  &.avatar-female{
    .shirt-color {
      fill: @client-female-shirt-color !important;
    }
    .shoe-color {
      fill: @client-female-shoe-color !important;
    }
  }

  .pant-color {
    fill: @client-pant-color !important;
  }

  &.skin-lighter {
    .skin-color {
      fill: @skin-lighter !important;
    }
  }
  &.skin-light {
    .skin-color {
      fill: @skin-light !important;
    }
  }
  &.skin-medium {
    .skin-color {
      fill: @skin-medium !important;
    }
  }
  &.skin-dark {
    .skin-color {
      fill: @skin-dark !important;
    }
  }
  &.skin-darker {
    .skin-color {
      fill: @skin-darker !important;
    }
  }

  &.hair-blonde .hair-color       {fill: @hair-blonde;}
  &.hair-red .hair-color          {fill: @hair-red;}
  &.hair-brown-light .hair-color  {fill: @hair-brown-light;}
  &.hair-brown-medium .hair-color {fill: @hair-brown-medium;}
  &.hair-brown-dark .hair-color   {fill: @hair-brown-dark;}
  &.hair-gray-dark .hair-color    {fill: @hair-gray-dark;}
  &.hair-gray-light .hair-color   {fill: @hair-gray-light;}
  &.hair-bald .hair-color, &.hair-bald .hair-lighten, &.hair-bald .hair-shade {
      display: none;
  }
}

/**
* @styles color-classes Additional Color Classes
* @parent avatars.less 5
*
* Each SVG file also has several elements which contain similar classes that determine what colors are applied
* to that portion of the vector image. For example, the avatar's skin tone will have `class="skin-color"`
* which allows the CSS to apply the skin tone to that class. These classes can be edited directly in a code editor.
*
* Colors in SVGs are controlled by fills (e.g. `.shoe-color { fill: #5e7077`;}).
*
* Here is a list of currently used classes that apply color to the SVGs:
*
*  * Hair color `.hair-color`
*  * Skin tone `.skin-color`
*  * Shirt/Tie color`.shirt-color`
*  * Suit coat color (guides only) `.suit-color`
*  * Buttons on suit coats (female guide only) `.button-color`
*  * Pant color (for guides set suit-color and pant color to the same fill) `.pant-color`
*  * Shoe color `.shoe-color`
*
* ### Shades and Lighten Classes
*
* Each SVG file also has several internal (within the file) classes that determine what elements get
* shaded/lightend are applied to that portion of the vector image. For example, the avatar's facial features
* have `class="nose-shade"`, `class="eye-right-shade"`, and `class="eye-left-shade"` which allows the CSS
* to darken and apply a gradient created within the SVG (referred to by and ID, e.g. `#afl-neck-shade_1_`). `avatar-female-XXX.svg` files have `class="hair-shade"` to highlight and darken portions of the hair. These
* classes can be edited directly in a code editor.
*
* Colors in SVGs are controlled by fills (e.g. `.hair-shade { fill: #5e7077`;}). If you want to overwrite
* these classes, you will need to do so with an `!important` declaration in your stylesheet. If you do not
* want the class to apply at all, for example, if you were making an avatar bald:
* ```
.hair-color {display: none;}
.hair-shade {display: none;}
```
*
*
* @iframe demos/avatars/hair.html 600
*
*
* Here is a list of currently used classes that apply shades/lighten to the SVGs:
*
*  * Hair shade and lighten `.hair-shade`
*  * Nose shade gradient `.nose-shade`
*  * Eye shade gradients `.eye-left-shade` and `.eye-right-shade`
*  * Under chin shade gradient `.neck-shade`
*  * Ear shade gradient `.ear-shade`
*
* Pants, suits, shirts, hands, and arms have gradients applied to paths overlayed as well, but since
* these won't need to change there haven't been global classes created for them.
*
* ___
*
**/

/**
* @styles editing-svgs Editing SVG Files
* @parent avatars.less 6
*
* The SVG files can be edited in any vector graphics application (like Adobe Illustrator). However, because
* of the CSS reference and classnames required for A2J the files will also need to be opened in a text editor
* prior to usage. Once vector editing is completed and saved as an SVG, open the files in a text editor to
* ensure that the CSS references are in tact.
*
* ___
*
**/

/**
* @styles browser-hacks Browser Hacks
* @parent avatars.less 7
*
*
* In IE11 and Edge there was an issue with small paths with gradients applied (e.g. eyes, nose, and ears)
* so an overwrite hack was created to fill these paths with a solid black fill and give them 10% opacity
*
```
// IE10+ Hack to fix Avatar SVG on the About page and bubble positioning with Avatars and spacing between Avatars in IE11 and to fix small SVG gradients appearing as solid black
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #tab-about .avatar-guide {
    height: 60vh;
  }

  .guide-wrapper, .client-wrapper {
    width: 48%;
  }
  .guide-wrapper {
    margin-left: 8%;
  }

  .client-wrapper {
    margin-left: -4%;
  }

  .nose-shade, .eye-left-shade, .eye-right-shade {
    fill: #000000 !important;
    fill-opacity: 0.1 !important;
  }
}

// Edge Hack to fix small SVG gradients appearing as solid black in Edge
@@supports (-ms-ime-align: auto) {
  .nose-shade, .eye-left-shade, .eye-right-shade {
    fill: #000000 !important;
    fill-opacity: 0.1 !important;
  }
}
```
*
* Additional IE11 specific hacks are found in `avatar.less` to remove the padding below the SVG (from
* https://css-tricks.com/scale-svg/) and to adjust the distance from the bubble arrow/tail is from the
* avatars in IE11. **This file can be removed when A2J no longer supports IE11**.
*
```
a2j-viewer-avatar {

  // the parentheses after the mixin name prevent the mixin code to be output
  .scaling-svg-mixin() {
    width: 100% !important;

    // https://css-tricks.com/scale-svg/
    // Use the padding-bottom Hack on a Container
    .scaling-svg-container {
      position: relative;
      height: 0;
      width: 100%;
      padding: 0;
      padding-bottom: 70%;
    }

    .scaling-svg {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
    }
  }

  // IE10+
  @@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .scaling-svg-mixin;
  }
}

// IE10+ Hack to fix bubble positioning with Avatars and spacing between Avatarsin IE11
@@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .guide-wrapper {
    margin-left: 8%;
    .bubble-arrow, .bubble{
      right: 38% !important;
    }
  }

  .client-wrapper {
    margin-left: -12%;
    .bubble-arrow, .bubble{
      left: 38% !important;
    }
  }
}

```
*
**/

// IE10+ Hack to fix Avatar SVG on the About page and bubble positioning with Avatars and spacing between Avatars in IE11 and to fix small SVG gradients appearing as solid black
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #tab-about .avatar-guide {
    height: 60vh;
  }

  .guide-wrapper, .client-wrapper {
    width: 48%;
  }
  .guide-wrapper {
    margin-left: 8%;
  }

  .client-wrapper {
    margin-left: -4%;
  }

  .nose-shade, .eye-left-shade, .eye-right-shade {
    fill: #000000 !important;
    fill-opacity: 0.1 !important;
  }
}

// Edge Hack to fix small SVG gradients appearing as solid black in Edge
@supports (-ms-ime-align: auto) {
  .nose-shade, .eye-left-shade, .eye-right-shade {
    fill: #000000 !important;
    fill-opacity: 0.1 !important;
  }
}