editor/src/styles/_components.scss

@use "mixins";
@use "vars";

@use 'sass:color';
// MAP
.maputnik-map__container {
  background: white;
  display: flex;
  width: vars.$layout-map-width;

  &--error {
    align-items: center;
    justify-content: center;
  }

  &__error-message {
    margin: 16px;
    text-align: center;
  }
}

.maputnik-map__map {
  width: 100%;
  height: 100%;
}

.maputnik-input-block:hover,
.maputnik-filter-editor-compound-select:hover {
  .maputnik-doc-button {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
  }
}

// DOC LABEL
.maputnik-doc {

  &-wrapper {
    display: inline-block;
    box-sizing: border-box;
    font-size: vars.$font-size-6;
    line-height: 2;
    user-select: none;
    position: relative;
    vertical-align: top;
  }

  &-popup {
    display: none;
    color: vars.$color-lowgray;
    background-color: vars.$color-gray;
    padding: vars.$margin-2;
    font-size: 10px;
    position: absolute;
    top: 20px;
    left: 0;
    width: 120px;
    z-index: 10;
    pointer-events: none;
  }

  &-button {
    opacity: 0;
    pointer-events: none;
    background: vars.$color-black;
    color: white;
    border: none;
    padding: 4px;

    svg {
      pointer-events: none;
    }

    &--open {
      opacity: 1;
      pointer-events: all;
    }
  }
}

.maputnik-doc-inline {
  color: vars.$color-lowgray;
  background-color: vars.$color-gray;
  padding: vars.$margin-2;
  font-size: 12px;
  margin-top: vars.$margin-3;
  line-height: 1.5;
  flex: 1 0;
}

.maputnik-doc-target:hover .maputnik-doc-popup {
  display: block;
  text-align: left;
}

// BUTTON
.maputnik-button {
  display: inline-block;
  cursor: pointer;
  background-color: vars.$color-midgray;
  color: vars.$color-lowgray;
  font-size: vars.$font-size-6;
  padding: vars.$margin-2;
  user-select: none;
  border-width: 0;
  border-radius: 2px;
  box-sizing: border-box;
  text-decoration: none;

  &:hover {
    background-color: color.adjust(vars.$color-midgray, $lightness: 12%);
    color: vars.$color-white;
  }

  &:disabled {
    background-color: color.adjust(vars.$color-midgray, $lightness: -5%);
    color: vars.$color-midgray;
    cursor: not-allowed;
  }
}

.maputnik-big-button {
  margin-top: vars.$margin-3;
  display: inline-block;
  padding: vars.$margin-3;
  font-size: vars.$font-size-5;
}

.maputnik-wide-button {
  padding: vars.$margin-2 vars.$margin-3;
}

.maputnik-green-button {
  background-color: vars.$color-green;
  color: vars.$color-black;
}

.maputnik-white-button {
  background-color: vars.$color-white;
  color: vars.$color-black;
}

.maputnik-icon-button {
  background-color: transparent;

  &:hover:not(:disabled) {
    background-color: transparent;

    label,
    svg {
      cursor: pointer;
    }

    svg {
      fill: vars.$color-white;
    }
  }
}

// INPUT BLOCK
.maputnik-input-block {
  margin: vars.$margin-3;
  display: flex;
  flex-wrap: wrap;

  &-label {
    color: vars.$color-lowgray;
    user-select: none;
    width: 32%;
    vertical-align: top;
    font-size: 12px;
  }

  &-action {
    color: vars.$color-lowgray;
    user-select: none;
    width: 18%;
    vertical-align: top;
    font-size: 12px;
    text-align: right;
  }

  &-content {
    width: 50%;
  }
}

.maputnik-action-block {
  .maputnik-input-block-label {
    display: inline-block;
    width: 32%;
    margin-bottom: vars.$margin-3;
  }

  .maputnik-input-block-action {
    vertical-align: top;
    display: inline-block;
    width: 18%;
  }

  .maputnik-input-block-action > div {
    text-align: right;
  }

}

.maputnik-data-spec-block,
.maputnik-zoom-spec-property {
  .maputnik-inline-error {
    margin-left: 32%;
  }
}

// SPACE HELPER
.maputnik-space {
  @include mixins.vendor-prefix(flex-grow, 1);
}

// MESSAGE PANEL
.maputnik-message-panel {
  padding: vars.$margin-2;

  &-error {
    color: vars.$color-red;
  }

  &__switch-button {
    all: unset;
    text-decoration: underline;
    cursor: pointer;
  }
}

.maputnik-dialog {
  &__buttons {
    text-align: right;
  }
}

.map-state-menu {
  display: inline-block;

  &__menu {
    position: absolute;
    z-index: 999999;
    background: vars.$color-black;
    display: flex;
    flex-direction: column;
    align-content: stretch;

    li {
      display: flex;
      flex-direction: column;

      button {
        width: 100%;
        text-align: left;
      }
    }
  }
}

.maputnik-inline-error {
  color: #a4a4a4;
  padding: 0.4em 0.4em;
  font-size: 0.9em;
  border: solid 1px vars.$color-red;
  border-radius: 2px;
  margin: vars.$margin-2 0px;
}

.maputnik-expression-editor {
  border: solid 1px vars.$color-gray;
}

.maputnik-input-block--wide {
  .maputnik-input-block-content {
    display: block;
    width: auto;
    flex: 1;
  }

  .maputnik-input-block-label {
    width: 82%;
  }

  .maputnik-input-block-action {
    text-align: right;
  }
}

.maputnik-expr-infobox {
  font-size: vars.$font-size-6;
  background: vars.$color-midgray;
  padding: vars.$margin-2;
  border-radius: 2px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  color: vars.$color-white;
}

.maputnik-expr-infobox__button {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  color: currentColor;
  cursor: pointer;
}