@import "../pages/mixins.css";

.svg-map {
  width: 100%;
  & svg {
    & path.region {
      stroke-width: 1;
      stroke-opacity: 1;
      stroke: var(--white);

      fill: var(--white);
      fill-opacity: 0.7;

      cursor: pointer;
      transition: fill-opacity 0.4s ease;
      &.hover {
        fill-opacity: 1;
      }
    }
    & g {
      pointer-events: all;
    }
    & path.comuna {
      fill: var(--dark-3);
      fill-opacity: 0.2;
      stroke: var(--white);
      cursor: pointer;
      transition: fill 0.4s ease, opacity 0.4s ease;
      &.selected {
        fill: var(--accent);
        fill-opacity: 1;
        cursor: pointer;
      }
      &.hover {
        fill: var(--white);
        fill-opacity: 1;
        cursor: pointer;
      }
    }
    & path.limite {
      fill: none;
      stroke: var(--white);
      pointer-events: none;
    }
    & circle.border-circle,
    & clippath {
      fill: none;
      stroke: var(--white);
      pointer-events: none;
    }
  }

  /* extends .datachile-tooltip style in app.css */
  & .svg-map-tooltip {
    /* typography */
    @add-mixin body-font-bold;
    /* sizing */
    width: 160px;
    /* positioning */
    position: absolute;
    margin-top: -3rem; /* fudge into place above cursor */
    z-index: 1;
    /* theming */
    border: none;
    /* prevent from obscuring map target */
    pointer-events: none;

    /* initial state */
    &:not([style]) {
      opacity: 0;
    }

    /* override default splash style */
    &, & a {
      @add-mixin font-xxs;
      line-height: 1.5;
      text-shadow: none !important;
    }
  }
}
