@import "~terriajs-variables";

.guidance {
  position: relative;
}

.context {
  box-sizing: border-box;
  width: 256px;
  background-color: $modal-bg;
  padding: 16px;
  color: $text-darker;

  min-height: 136px;
  border-radius: 4px;

  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.12), 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}

.btn {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-primary from "../../Sass/common/_buttons.scss";
}

.indicatorWrapper {
  float: right;
  margin-right: -8px;
}
.indicator {
  display: inline-block;
  box-sizing: border-box;
  // height: 1px;
  height: 2px;
  width: 8px;
  // border: 2px solid #519ac2;
  background-color: $color-primary;
  opacity: 0.35;
  // margin-left: 8px;

  margin-left: 6px;
  border-radius: 4px;
}

.indicatorEnabled {
  opacity: 1;
}