/* UX-022.B: every MapLibre control keeps a 48px pointer/touch target. */
.maplibregl-ctrl-group button,
.maplibregl-ctrl-attrib-button {
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
}

.maplibregl-ctrl-group button {
  width: 48px;
  height: 48px;
}

.maplibregl-ctrl-attrib-button {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

@media screen {
  .maplibregl-ctrl-attrib.maplibregl-compact {
    min-height: 44px;
    padding: 2px 48px 2px 0;
    border-radius: 24px;
  }

  .maplibregl-ctrl-attrib.maplibregl-compact-show {
    padding: 2px 52px 2px 8px;
  }

  .maplibregl-ctrl-bottom-left
    > .maplibregl-ctrl-attrib.maplibregl-compact-show,
  .maplibregl-ctrl-top-left
    > .maplibregl-ctrl-attrib.maplibregl-compact-show {
    padding: 2px 8px 2px 52px;
  }

  .maplibregl-ctrl-attrib.maplibregl-compact-show
    .maplibregl-ctrl-attrib-inner {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}

.maplibregl-ctrl-attrib-button:focus-visible,
.maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid #f8fcff;
  outline-offset: 1px;
  box-shadow: 0 0 0 5px #075b96;
}

@media (forced-colors: active) {
  .maplibregl-ctrl-attrib-button:focus-visible,
  .maplibregl-ctrl-group button:focus-visible {
    outline: 3px solid ButtonText;
    outline-offset: 2px;
    box-shadow: none;
  }
}