// Set default customise component variables here,
// Override it in theme variables files
$x-avatar-bg-icon-color:     fade-out(theme-color('info-transparent'), 0.25)  !default;
$x-avatar-bg-icon-business:  str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3e%3cpath fill='#{$x-avatar-bg-icon-color}' fill-rule='evenodd' d='M48,28 L48,12 L8,12 L8,84 L88,84 L88,28 L48,28 L48,28 Z M24,76 L16,76 L16,68 L24,68 L24,76 L24,76 Z M24,60 L16,60 L16,52 L24,52 L24,60 L24,60 Z M24,44 L16,44 L16,36 L24,36 L24,44 L24,44 Z M24,28 L16,28 L16,20 L24,20 L24,28 L24,28 Z M40,76 L32,76 L32,68 L40,68 L40,76 L40,76 Z M40,60 L32,60 L32,52 L40,52 L40,60 L40,60 Z M40,44 L32,44 L32,36 L40,36 L40,44 L40,44 Z M40,28 L32,28 L32,20 L40,20 L40,28 L40,28 Z M80,76 L48,76 L48,68 L56,68 L56,60 L48,60 L48,52 L56,52 L56,44 L48,44 L48,36 L80,36 L80,76 L80,76 Z M72,44 L64,44 L64,52 L72,52 L72,44 L72,44 Z M72,60 L64,60 L64,68 L72,68 L72,60 L72,60 Z'/%3e%3c/svg%3e"), "#", "%23") !default;
$x-avatar-bg-icon-gov:       str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3e%3cpath fill='#{$x-avatar-bg-icon-color}' fill-rule='evenodd' d='M18,40 L18,68 L30,68 L30,40 L18,40 L18,40 Z M42,40 L42,68 L54,68 L54,40 L42,40 L42,40 Z M10,88 L86,88 L86,76 L10,76 L10,88 L10,88 Z M66,40 L66,68 L78,68 L78,40 L66,40 L66,40 Z M48,4 L10,24 L10,32 L86,32 L86,24 L48,4 L48,4 Z'/%3e%3c/svg%3e"), "#", "%23") !default;
$x-avatar-bg-icon-trust:     str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3e%3cpath fill='#{$x-avatar-bg-icon-color}' fill-rule='evenodd' d='M25.5135135,28 C37.1522674,28 44,30.3297734 44,32 C44,33.6702266 37.1522674,36 25.5135135,36 C14.8477326,36 8,33.6702266 8,32 C8,30.3297734 14.8477326,28 25.5135135,28 Z M36.1164318,47.1612012 C33.045189,47.6825071 29.45172,48 25.3918919,48 C17.8278224,48 11.799986,46.6876266 8,45.0182442 L8,37.0182452 C11.7999859,38.6876266 17.8278224,40 25.3918919,40 C33.7153105,40 40.078492,38.6654888 44,36.9761058 L44,41.8258686 C39.6639212,43.1261048 36.7234242,45.0180668 36.1164318,47.1612012 Z M36,51.2205694 L36,59.2205694 C32.975723,59.7207688 29.454073,60.0238942 25.4871681,60.0238942 C17.8595681,60.0238942 11.7941151,58.689383 8,57 L8,49.0477884 C8.01790548,49.0398157 8.03586154,49.0318509 8.05386595,49.0238932 C11.8513967,50.7019486 17.8955634,52.0238942 25.4871681,52.0238942 C29.454073,52.0238942 32.975723,51.7207688 36,51.2205694 Z M36,63.2205694 L36,71.2205694 C32.975723,71.7207688 29.454073,72.0238942 25.4871681,72.0238942 C17.8595681,72.0238942 11.7941151,70.689383 8,69 L8,61.0477884 C8.01790548,61.0398157 8.03586154,61.0318509 8.05386595,61.0238932 C11.8513967,62.7019486 17.8955634,64.0238942 25.4871681,64.0238942 C29.454073,64.0238942 32.975723,63.7207688 36,63.2205694 Z M36,83.2205694 C32.975723,83.7207688 29.454073,84.0238942 25.4871681,84.0238942 C17.8595681,84.0238942 11.7941151,82.689383 8,81 L8,73 C11.7941151,74.689383 17.8595681,76.0238942 25.4871681,76.0238942 C29.454073,76.0238942 32.975723,75.7207688 36,75.2205694 L36,83.2205694 Z M57.5135135,44 C69.1522674,44 76,46.3297734 76,48 C76,49.6702266 69.1522674,52 57.5135135,52 C46.8477326,52 40,49.6702266 40,48 C40,46.3297734 46.8477326,44 57.5135135,44 Z M76,60.9761058 C72.078492,62.6654888 65.7153104,64 57.3918919,64 C49.8278224,64 43.799986,62.6876266 40,61.0182442 L40,53.0182452 C43.7999859,54.6876266 49.8278224,56 57.3918919,56 C65.7153105,56 72.078492,54.6654888 76,52.9761058 L76,60.9761058 Z M76,65.0407705 L76,73.0407705 C72.0710894,74.7108039 65.7435149,76.0238942 57.4871681,76.0238942 C49.8595681,76.0238942 43.7941151,74.689383 40,73 L40,65.0477884 C40.0179055,65.0398157 40.0358615,65.0318509 40.053866,65.0238932 C43.8513967,66.7019486 49.8955634,68.0238942 57.4871681,68.0238942 C65.7435149,68.0238942 72.0710894,66.7108039 76,65.0407705 Z M76,77.0407705 L76,85.0407705 C72.0710894,86.7108039 65.7435149,88.0238942 57.4871681,88.0238942 C49.8595681,88.0238942 43.7941151,86.689383 40,85 L40,77.0477884 C40.0179055,77.0398157 40.0358615,77.0318509 40.053866,77.0238932 C43.8513967,78.7019486 49.8955634,80.0238942 57.4871681,80.0238942 C65.7435149,80.0238942 72.0710894,78.7108039 76,77.0407705 Z M69.5135135,8 C81.1522674,8 88,10.3297734 88,12 C88,13.6702266 81.1522674,16 69.5135135,16 C58.8477326,16 52,13.6702266 52,12 C52,10.3297734 58.8477326,8 69.5135135,8 Z M88,24.9761058 C84.078492,26.6654888 77.7153104,28 69.3918919,28 C61.8278224,28 55.799986,26.6876266 52,25.0182442 L52,17.0182452 C55.7999859,18.6876266 61.8278224,20 69.3918919,20 C77.7153105,20 84.078492,18.6654888 88,16.9761058 L88,24.9761058 Z M88,29.0407705 L88,37.0407705 C84.0710894,38.7108039 77.7435149,40.0238942 69.4871681,40.0238942 C61.8595681,40.0238942 55.7941151,38.689383 52,37 L52,29.0477884 C52.0179055,29.0398157 52.0358615,29.0318509 52.053866,29.0238932 C55.8513967,30.7019486 61.8955634,32.0238942 69.4871681,32.0238942 C77.7435149,32.0238942 84.0710894,30.7108039 88,29.0407705 Z M76.5303995,43.6804824 C81.4015591,43.1842734 85.2769084,42.1982552 88,41.0407705 L88,49.0407705 C85.9588026,49.9084074 83.2701717,50.6797003 80,51.2205694 L80,47.9880529 C80,46.4017159 78.726475,44.9233802 76.5303995,43.6804824 Z M88,61.0168773 C85.9588026,61.8845142 83.2701717,62.6558071 80,63.1966762 L80,55.1966762 C83.2701717,54.6558071 85.9588026,53.8845142 88,53.0168773 L88,61.0168773 Z M88,73.0168773 C85.9588026,73.8845142 83.2701717,74.6558071 80,75.1966762 L80,67.1966762 C83.2701717,66.6558071 85.9588026,65.8845142 88,65.0168773 L88,73.0168773 Z'/%3e%3c/svg%3e "), "#", "%23") !default;
$x-avatar-bg-icon-user:      str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3e%3cpath fill='#{$x-avatar-bg-icon-color}' d='M70.1766037,70.4970549 L70.1766037,70.4970549 C75.5517477,72.9870828 82.9140956,76.3964038 83.0869661,86.3168337 L83.1160472,88 L12,88 L12,86.346595 C12,74.0551824 23.2333563,70.2738452 28.6327345,68.4567531 L29.2612079,68.2451173 C34.0611937,66.6082464 37.8498059,65.3136303 37.8498059,58.2387103 C37.8498059,50.9339671 32.0885304,46.3755296 32.0303683,46.3325411 L31.6910896,45.977059 C31.5779967,45.8150253 29.0576407,42.1246254 31.2435649,36.7196445 C30.3517466,34.3866901 27.8895525,26.7892942 30.6037822,19.8714478 C32.2840195,15.5874755 35.6089508,12.4030175 40.4816392,10.4073577 C40.5559574,10.3643691 45.2363879,8 50.5032858,8 C54.9462212,8 60.7915086,9.70300713 63.5299724,17.7716234 C64.6108174,19.2811822 69.7048448,27.1811512 65.4961733,36.7295649 C66.1408028,38.268885 67.0875519,41.6848197 65.1520477,45.7373153 L64.984024,46.0861837 L64.6819044,46.3242741 C64.6285891,46.3672626 58.8527731,51.0249044 58.8527731,58.2387103 C58.8527731,63.9991733 60.3326745,64.8754779 63.5752096,66.7917743 C64.3878628,67.2729152 65.2699875,67.7937377 66.2118898,68.4369123 C67.2329571,69.1329958 68.6627745,69.7943578 70.1766037,70.4970549 L70.1766037,70.4970549 Z'/%3e%3c/svg%3e "), "#", "%23") !default;
$x-avatar-bg-icon-users:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3e%3cg fill='#{$x-avatar-bg-icon-color}' fill-rule='evenodd'%3e%3cpath d='M30.9147583,76 L4,76 L4,74.5119355 C4,63.4496642 14.1100206,60.0464607 18.969461,58.4110778 L19.5350871,58.2206056 C23.8550743,56.7474217 27.2648253,55.5822672 27.2648253,49.2148393 C27.2648253,42.6405704 22.0796773,38.5379766 22.0273315,38.499287 L21.7219807,38.1793531 C21.6201971,38.0335228 19.3518766,34.7121629 21.3192084,29.8476801 C20.5165719,27.7480211 18.3005973,20.9103648 20.7434039,14.684303 C22.2556176,10.8287279 25.2480557,7.96271572 29.6334753,6.16662189 C29.7003617,6.12793221 33.9127491,4 38.6529573,4 C42.6515991,4 47.9123577,5.53270642 50.3769752,12.7944611 C50.833047,13.4314324 52.0830559,15.3326332 52.8919238,18.0582356 C52.6116471,18.1927743 52.3527565,18.3289362 52.1174556,18.4650433 C46.756025,20.6608725 42.9467387,24.3102486 41.0195845,29.2237659 C38.8292812,34.8062639 39.3376051,40.6591549 41.0919864,45.9060023 C41.2463112,46.367543 40.2540383,50.0951003 40.8457911,52.6767085 C41.0619708,53.6198241 41.3690582,54.4737458 41.7348791,55.2341619 C41.9837992,55.7515815 42.2271741,56.1610434 42.4419112,56.4687077 L42.6170729,56.7196703 L42.8283752,56.941064 L43.133726,57.2609979 L43.3721224,57.5107797 C43.3721224,57.5107797 43.5936346,57.6766285 43.6301289,57.708631 C43.7481372,57.8121143 43.8871335,57.9418354 44.0413168,58.095804 C44.4991628,58.5530127 44.9630871,59.0948686 45.3939689,59.7074646 C46.5776203,61.3902933 47.2648253,63.2387329 47.2648253,65.2148393 C47.2648253,68.4745491 46.8313405,68.8703427 42.2440295,70.4346882 L41.6929131,70.6202434 C36.9857745,72.204371 34.2117128,73.4320291 31.2068507,75.7688802 C31.1085926,75.8452946 31.0112261,75.9223344 30.9147583,76 L30.9147583,76 Z'/%3e%3cpath d='M80.3589434,76.2473494 L80.3589434,76.2473494 C85.196573,78.4883745 91.822686,81.5567635 91.9782695,90.4851504 L92.0044425,92 L28,92 L28,90.5119355 C28,79.4496642 38.1100206,76.0464607 42.969461,74.4110778 L43.5350871,74.2206056 C47.8550743,72.7474217 51.2648253,71.5822672 51.2648253,65.2148393 C51.2648253,58.6405704 46.0796773,54.5379766 46.0273315,54.499287 L45.7219807,54.1793531 C45.6201971,54.0335228 43.3518766,50.7121629 45.3192084,45.8476801 C44.5165719,43.7480211 42.3005973,36.9103648 44.7434039,30.684303 C46.2556176,26.8287279 49.2480557,23.9627157 53.6334753,22.1666219 C53.7003617,22.1279322 57.9127491,20 62.6529573,20 C66.6515991,20 71.9123577,21.5327064 74.3769752,28.7944611 C75.3497357,30.153064 79.9343603,37.2630361 76.1465559,45.8566085 C76.7267225,47.2419965 77.5787967,50.3163377 75.8368429,53.9635838 L75.6856216,54.2775654 L75.4137139,54.4918466 C75.3657302,54.5305363 70.1674958,58.722414 70.1674958,65.2148393 C70.1674958,70.399256 71.4994071,71.1879301 74.4176886,72.9125969 C75.1490765,73.3456236 75.9429887,73.814364 76.7907008,74.393221 C77.7096614,75.0196962 78.996497,75.614922 80.3589434,76.2473494 L80.3589434,76.2473494 Z'/%3e%3c/g%3e%3c/svg%3e "), "#", "%23") !default;


.x-avatar-background {
  @extend .overflow-hidden,
          .bg-light-transparent;

  background-repeat: no-repeat;
  background-position: right map_get($spacers, 3);

  &.is-business {
    background-image: $x-avatar-bg-icon-business;
  }

  &.is-government {
    background-image: $x-avatar-bg-icon-gov;
  }

  &.is-trust {
    background-image: $x-avatar-bg-icon-trust;
  }

  &.is-user  {
    background-image: $x-avatar-bg-icon-user;
  }

  &.is-users  {
    background-image: $x-avatar-bg-icon-users;
  }

}