@use "vars";

.maputnik-popup-layer {
  display: flex;
  flex-direction: row;
}

.maputnik-popup-layer__swatch {
  display: inline-block;
  width: 5px;
  align-content: stretch;
}

.maputnik-popup-layer__label {
  display: block;
  color: vars.$color-lowgray;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  padding: vars.$margin-2;
  padding-top: vars.$margin-1;
  padding-bottom: vars.$margin-1;
}

.maputnik-popup-layer-id {
  padding-left: vars.$margin-2;
  padding-right: vars.$margin-2;
  background-color: vars.$color-midgray;
  color: vars.$color-white;
}

.maputnik-feature-property-popup {
  max-height: calc(50vh - 40px); /* toolbar height: 40px */
  overflow-y: auto;
  .maputnik-input-block {
    margin: 0;
    margin-left: vars.$margin-2;
    margin-right: vars.$margin-2;
    margin-top: vars.$margin-2;
  }
}

.maputnik-popup-table {
  width: 100%;
}

.maputnik-popup-table-cell {
  color: vars.$color-lowgray;
  padding-left: vars.$margin-2;
  padding-right: vars.$margin-2;
}