::ng-deep {
  .pin {
    opacity: 0;

    &.in-view {
      opacity: 1;
    }
  }
}

::ng-deep #spn-map {
  --map-bg: #111112;
  --map-country-active: #424141;
  --map-country-inactive: #2a2a2a;
  --map-country-border-width: 2px;
  --map-country-border-color: #1e1e1e;
  --map-country-border-color-selected: #858585;
  --map-country-blocked-primary: #858585;
  --map-country-blocked-secondary: #402323;

  .overlay {
    fill: none;
    pointer-events: all;
  }

  g {

    circle,
    polygon {
      fill: #626262;
      stroke: #626262;
      stroke-width: 1;
      stroke-linejoin: round;
      transition: all 200ms linear 0s;
    }

    circle:hover,
    polygon:hover {
      fill: theme('colors.yellow.200');
      stroke: theme('colors.yellow.300');
      stroke-width: 2;
    }
  }

  g[in-use=true] {
    circle {
      fill: #239215;
      stroke: #239215;
      transform: scale(1.15)
    }

    polygon {
      fill: #0376bb;
      stroke: #0376bb;
      transform: scale(1.15)
    }
  }

  g[is-exit=true] {

    circle,
    polygon {
      transform: scale(1.3);
      stroke-width: 2;
    }

    polygon {
      stroke: #039af4;
      fill: #0376bb;
    }

    circle {
      stroke: #30ae20;
      fill: #239215;
    }
  }

  g[is-home=true] circle {
    stroke: white;
    stroke-width: 4.5;
    fill: black;
    transform: scale(1);
  }

  g[raise=true] {

    circle,
    polygon {
      fill: theme('colors.yellow.200');
      stroke: theme('colors.yellow.300');
      stroke-width: 2;
      transform: scale(1.8);
    }
  }

  .marker {
    cursor: pointer;
    fill: #252525;
    stroke: rgba(151, 151, 151, 0.8);
    transition: all 250ms 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .marker-label {
    fill: white;
  }

  path.lane {
    stroke: rgba(151, 151, 151, 0.2);
    fill: transparent;

    &[in-use=true] {
      stroke-width: 2;
      stroke: #0376bb;
    }

    &[is-live=true] {
      stroke-width: 1;
      stroke: theme('colors.red.300');

      &[is-encrypted=true] {
        stroke: theme('colors.green.200');
      }

      &:hover {
        stroke-width: 3;
      }
    }
  }

  #world-group {
    path {
      fill: var(--map-country-border-color);
      stroke: var(--map-country-border-color);
      stroke-width: var(--map-country-border-width);
      stroke-linejoin: round;
    }

    path[has-nodes=true] {
      fill: var(--map-country-inactive);
    }

    path[in-use=true] {
      fill: var(--map-country-active);
    }

    path:hover {
      cursor: pointer;
      fill: var(--map-country-active);
    }

    path.selected {
      stroke: var(--map-country-border-color-selected);
    }
  }
}

:host-context(.disabled) {
  @apply bg-white;

  #world-group {
    path {
      fill: #000000;
      stroke: #111111;
      stroke-width: .5px;
    }
  }
}
