@import "colors";

$dep-nothing: #E3E3FD; // blue-france-925
$dep-small: #CACAFB;   // blue-france-850
$dep-medium: #8585F6;  // blue-france-625
$dep-large: #313178;   // blue-france-200
$dep-xlarge: #272747;  // blue-france-125

#map-svg {
  max-width: 100%;
  height: auto;
}

#map-infos {
  min-width: 328px;
}

.departement.nothing {
  fill: $dep-nothing;
}

.departement.small {
  fill: $dep-small;
}

.departement.medium {
  fill: $dep-medium;
}

.departement.large {
  fill: $dep-large;
}

.departement.xlarge {
  fill: $dep-xlarge;
}

.legends {
  .legend {
    width: 60px;
    height: 10px;
    display: inline-block;
  }

  .nothing {
    background-color: $dep-nothing;
  }

  .small {
    background-color: $dep-small;
  }

  .medium {
    background-color: $dep-medium;
  }

  .large {
    background-color: $dep-large;
  }

  .xlarge {
    background-color: $dep-xlarge;
  }
}