@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.panel {
  background: $feature-info-bg;
  color: $feature-info-color;
  border-radius: $radius-small;
  display: none;

  a {
    @include link($feature-info-bg);
  }
}

.is-collapsed {
  .body {
    display: none;
  }
}

.is-visible {
  display: block;
}

.is-translucent {
  opacity: 0.6;
}

.header {
  background: $feature-info-header-bg;
  padding-right: $input-height;
  line-height: $modal-header-height;
}

.btnPanelHeading {
  padding: 0px 8px;
  color: $feature-info-btn-color;
  width: 100%;
}

.btn--download {
  padding: 3px;
  width: 27px;
  margin-left: 3px;
}

.btn--close-feature,
.btnToggleFeature {
  composes: btn from "../../Sass/common/_buttons.scss";
  vertical-align: middle;
  &:hover,
  &:focus {
    svg {
      fill: $color-primary;
    }
  }
  svg {
    height: 10px;
    width: 10px;
    display: block;
    fill: $feature-info-btn-color;
  }
}

.btn--close-feature {
  position: absolute;
  right: 8px;
  top: 8px;
  svg {
    width: 15px;
    height: 26px;
  }
}

.btnToggleFeature {
  padding: $padding;
}

.no-results {
  composes: no-results from "../../Sass/common/_labels.scss";
}

.body {
  composes: list-reset from "../../Sass/common/_base.scss";
  composes: scrollbars from "../../Sass/common/_base.scss";

  overflow-y: auto;
  overflow-x: auto;
  max-height: calc(80vh - #{$padding * 2 + $btn-default-line-height});
  font-size: $font-size-feature-info;
}

.location {
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-location {
  composes: btn from "../../Sass/common/_buttons.scss";
  vertical-align: bottom;
  margin-left: 5px;

  &:hover {
    svg {
      fill: $color-primary;
    }
  }
  svg {
    height: 18px;
    width: 18px;
    fill: $feature-info-btn-color;
  }
}

.btn-location-selected {
  composes: btn-location;

  svg {
    fill: $color-primary;
  }
}

.satelliteSuggestionBtn {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-primary from "../../Sass/common/_buttons.scss";
  margin: 8px;
  width: calc(100% - 16px);
}