@use "../../Sass/common/_variables";
@use "../../Sass/common/mixins";

.panel {
  background: variables.$feature-info-bg;
  color: variables.$feature-info-color;
  border-radius: variables.$radius-xlarge;
  overflow: hidden;
  display: none;

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

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

.is-visible {
  display: block;
}

.is-translucent {
  opacity: 0.6;
}

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

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

.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: variables.$color-primary;
    }
  }

  svg {
    height: 10px;
    width: 10px;
    display: block;
    fill: variables.$feature-info-btn-color;
  }
}

.btn--close-feature {
  position: absolute;
  right: 8px;
  top: 8px;

  svg {
    width: 15px;
    height: 26px;
  }
}

.btnToggleFeature {
  padding: variables.$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 - #{variables.$padding * 2 + variables.$btn-default-line-height}
  );
  font-size: variables.$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: variables.$color-primary;
    }
  }

  svg {
    height: 18px;
    width: 18px;
    fill: variables.$feature-info-btn-color;
  }
}

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

  svg {
    fill: variables.$color-primary;
  }
}

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