@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.participation-map {
  padding: var(--section-padding) 0;
  background-color: var(--color-background);

  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: var(--color-button-primary-text);
    transition: 0.3s ease;
  }

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

  [data-link] {
    cursor: pointer;

    &:hover {
      .map-text {
        fill: var(--color-button-tertiary-text);
      }

      .map-shape {
        fill: var(--color-button-tertiary-background);
      }
    }
  }
}