// Set default customise component variables here,
// Override it in theme variables files
$x-type-icon-color:     fade-out(theme-color('info-transparent'), 0.25)  !default;
$x-type-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-type-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-type-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-type-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-type-icon-city:      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-type-icon-color}' fill-rule='evenodd' d='M60,44 L60,20 L48,8 L36,20 L36,28 L12,28 L12,84 L84,84 L84,44 L60,44 L60,44 Z M28,76 L20,76 L20,68 L28,68 L28,76 L28,76 Z M28,60 L20,60 L20,52 L28,52 L28,60 L28,60 Z M28,44 L20,44 L20,36 L28,36 L28,44 L28,44 Z M52,76 L44,76 L44,68 L52,68 L52,76 L52,76 Z M52,60 L44,60 L44,52 L52,52 L52,60 L52,60 Z M52,44 L44,44 L44,36 L52,36 L52,44 L52,44 Z M52,28 L44,28 L44,20 L52,20 L52,28 L52,28 Z M76,76 L68,76 L68,68 L76,68 L76,76 L76,76 Z M76,60 L68,60 L68,52 L76,52 L76,60 L76,60 Z'/%3e%3c/svg%3e "), "#", "%23") !default;
$x-type-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-type-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;


.card-popover-title {
  @extend .font-weight-bold,
          .text-default,
          %mb-3;
}

.card-popover-header {
  @extend .position-relative,
          .x-avatar-background,
          .d-block,
          .border-bottom,
          %mb-0,
          %p-3;
}

.x-detail-entry-item [x-placement$=start] .ngxp__arrow.arrow {
  background-color: lighten(theme-color('info'), 50%) !important;
}

.card-popover-body {
  @extend %p-3;
  max-height: 27em;

  dl {
    dd {
      @extend .text-grey;
    }

    &:last-child {
      @extend %mb-0;
    }
  }
}

.card-popover-footer {
  @extend %px-3,
          %py-2;

  &.has-menu {
    @extend .d-flex,
            %px-0,
            %py-0;
  }
}


// card header
.card-popover-title {
  @extend %d-flex,
  %align-items-center;
  h5,
  small{
    @extend %d-block,
            %mb-0;
  }
  .x-icon-container {
    @extend %text-info,
            %mr-2;
  }
}

.card-popover-desc {
  @extend %mb-0;
  font-weight: $font-weight-bold;
}

.card-info-title {
  @extend %text-uppercase,
          %mb-0;
}