@import 'vars';
@import 'mixins';
@import 'reset';
@import 'base';
@import 'components';
@import 'scrollbar';
@import 'picker';
@import 'toolbar';
@import 'modal';
@import 'export';
@import 'layout';
@import 'layer';
@import 'input';
@import 'filtereditor';
@import 'zoomproperty';
@import 'popup';
@import 'map';
@import 'codemirror';
@import 'react-collapse';

/**
 * Hacks for webdriverio isVisibleWithinViewport
 */
#app {
  height: 100vh;
}

.maputnik-layout {
  height: 100vh;
}

.react-icons {
  vertical-align: middle;
  width: 14px;
  height: 14px;
}

// TODO: Move these into correct *.scss files
.maputnik-inline-error {
  color: #a4a4a4;
  padding: 0.4em 0.4em;
  font-size: 0.9em;
  border: solid 1px $color-red;
  border-radius: 2px;
  margin: $margin-2 0px;
}

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

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

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

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

.maputnik-expr-infobox {
  font-size: $font-size-6;
  background: $color-midgray;
  padding: $margin-2;
  border-radius: 2px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  color: $color-white;
}
.maputnik-expr-infobox__button {
  unset: all;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  color: currentColor;
  cursor: pointer;
}