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

.panel{
  background: $feature-info-bg;
  color: $feature-info-color;
  border-radius: $radius-small;
  display: none;
  position: fixed;
  top: $mobile-header-height + 10px;
  right: 10px;
  max-width: 95%;
  min-width: 150px;
  max-height: 80vh;
  z-index: 99;
  font-family: $font-base;

  svg{
    fill: $feature-info-color;
  }

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

  // On very large screens, the feature info may be up to 40% of the screen.
  // On small screens (mobile), it make be up to 90% of the screen.
  // In between, it may be up to 90% of the largest mobile screen ($sm), minus a bit to leave room
  // for the map controls on the right.  This is computed in $feature-info-medium-max-size.
  $feature-info-medium-max-size: $sm * 0.9 - $feature-info-right-margin * 0.5;
  $feature-info-forty-percent-size: $feature-info-medium-max-size * 100 / 40;

  @media (min-width : $sm) and (max-width: $feature-info-forty-percent-size) {
    max-width: $feature-info-medium-max-size;
    right: $feature-info-right-margin;
  }

  @media (min-width: $feature-info-forty-percent-size) {
    max-width: 40%;
    right: $feature-info-right-margin;
  }
}

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

.is-visible {
  display: block;
}

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

.btn {
  composes: btn from '../../Sass/common/_buttons.scss';
  padding: 4px 9px;
  margin-right: 4px;
  color: $feature-info-btn-color;
}

.btnPanelHeading{
  composes: btn from '../../Sass/common/_buttons.scss';
  padding: 4px 9px;
  color: $feature-info-btn-color;
  width: 100%;
}

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

.btn--close-feature{
  composes: btn from '../../Sass/common/_buttons.scss';

  &:hover,
  &:focus {
    svg{
      fill: $color-primary;
    }
  }
  svg{
    height: 23px;
    width: 23px;
    fill: $feature-info-btn-color;
    position: relative;
    left: 10px;
  }
  position: absolute;
  right: 0;
  width: $modal-header-height;
  height: $modal-header-height;
}

.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;
  }
}