/* CSS Custom Properties for theming */
:root {
  --languageselector-button-size: 30px;
  --languageselector-button-icon-size: 24px;
  --languageselector-title-font-size: larger;
  --languageselector-title-padding: 5px;
  --languageselector-item-padding: 7px 3px 3px;
  --languageselector-hover-bg: lightgrey;
  --languageselector-selected-bg: rgb(0 0 0 / 33%);
  --languageselector-flag-border-color: rgb(0 0 0 / 20%);
  --languageselector-flag-border-radius: 3px;
}

/* Button style */
.leaflet-control-languageselector-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Cpath d='M8.9 5.8c-.6 2-1.4 3.7-2.4 5-1-1.3-1.9-3-2.5-5zm4 0v-2H7.2V1H5.7v2.8H.2v2h2a23 23 0 003 6.7 13.4 13.4 0 01-5.2 3l1 2c2.1-.8 4-2 5.4-3.5 1.5 1.6 3.3 2.8 5.5 3.5.2-.6.8-1.6 1.2-2-2.1-.7-3.9-1.7-5.3-3.1a20 20 0 003-6.6zm4.6 2.6L15 16.9h4.8zm-1.4-2h2.8L24 23h-3l-.6-4.3h-5.9l-.8 4.3H11z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--languageselector-button-icon-size);
  display: block;
  height: var(--languageselector-button-size);
  width: var(--languageselector-button-size);
}

/* Title style */
.leaflet-languageselector-title {
  font-size: var(--languageselector-title-font-size);
  font-weight: bold;
  text-align: center;
  padding: var(--languageselector-title-padding);
}

/* Hide title and languages when button is active */
.leaflet-control-languageselector-button > .leaflet-languageselector-title,
.leaflet-control-languageselector-button > .leaflet-languageselector-languagesdiv {
  display: none;
}

/* Language container with gap between items */
.leaflet-languageselector-languagesdiv {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.leaflet-languageselector-languagesdiv:has(.leaflet-languageselector-float-left) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
}

/* Flag style */
.leaflet-languageselector-langdiv > img {
  border-style: solid;
  border-width: 1px;
  border-color: var(--languageselector-flag-border-color);
  border-radius: var(--languageselector-flag-border-radius);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.leaflet-languageselector-float-left {
  display: inline-block;
}

.leaflet-languageselector-langdiv {
  cursor: pointer;
  padding: var(--languageselector-item-padding);
}

.leaflet-languageselector-langdiv:hover {
  background-color: var(--languageselector-hover-bg);
}

/* Selected language style */
.languageselector-selected {
  background-color: var(--languageselector-selected-bg);
  pointer-events: none;
}

.leaflet-languageselector-clearfloat {
  clear: both;
}