@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.participation-map {
  padding: var(--section-padding) 0;
  background-color: var(--theme-color-primary-dimmed-04);

  h2 {
    margin-top: var(--section-headline-margin);
    margin-bottom: 0.2em;
  }

  .container.small {
    @media(max-width: 567px) {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  svg {
    position: relative;
    display: block;
    margin-top: 12px;
  }

  .map-text {
    fill: white;
    transition: 0.3s ease;
  }

  .map-shape {
    fill: var(--theme-color-primary);
    transition: 0.3s ease;
  }

  [data-link] {
    cursor: pointer;

    &:hover {
      .map-text {
        fill: var(--theme-color-primary);
      }

      .map-shape {
        fill: var(--theme-color-primary-dimmed-03);
      }
    }
  }
}