/**
 * Map View
 *
 * Defines the appearance of the view that shows an interactive 2D map or 3D globe and all
 * of the other elements it contains:
 * 
 * - Containers
 * - Cesium (map widget)
 * - Scale Bar
 * - Toolbar
 * - Layers (child of toolbar)
 * - Layer Details
 * - Feature Info
 *
 */

/*****************************************************************************************
 *
 * Common classes
 *
 * Unlike the rest of the Map View styles, these classes do not follow the BEM naming
 * convention. This is because these styles are used in various elements throughout the map
 * view. If we switch to using SASS, then these class definitions can instead become SASS
 * @mixins, and we can @include them where required.
 *
 */

:root {
  /* COLOURS */
  --map-col-bkg: #111827;
  --map-col-bkg-lighter: #1b2538;
  --map-col-bkg-lightest: #242e42;
  --map-col-buttons: #313c52;
  --map-col-text: #F9FAFB;
  --map-col-green: #069868;
  --map-col-blue: #057fc6;
  --map-col-yellow: #f8b406;
  --map-col-buttons-emphasis: var(--portal-secondary-color, var(--map-col-green));
  --map-col-highlight: var(--portal-primary-color, var(--map-col-blue));
  /* SIZING: */
  --map-size-toolbar-link: 2.2rem;
  --map-size-toolbar-link-margin: 0.4rem;
  --map-size-toolbar-inter-link-margin: 0.5rem;
  --map-border-radius: 0.5rem;
  --map-width-toolbar: 21rem;
  --map-toolbar-link-width: calc(var(--map-size-toolbar-link) + var(--map-size-toolbar-link-margin) + var(--map-size-toolbar-link-margin));
  /* SHADOWS */
  --map-shadow-md: 0 1px 9px -1px rgba(0, 0, 0, 0.2), 0 1px 2px 0px rgba(0, 0, 0, 0.5);
  /* NOTE: 768px is used as the mobile -> desktop breakpoint throughout the map view, but we cannot use a CSS variable for this. */
}

/* hide the credits until we can find a better placement for them */
.cesium-widget-credits, .cesium-credit-lightbox-overlay {
  display: none !important;
}

/* ---- TOOLTIP ---- */

.map-tooltip {
  color: var(--map-col-text);
  border-radius: var(--map-border-radius);
  opacity: 1 !important;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  box-shadow: var(--map-shadow-md);
}

.map-tooltip.top .tooltip-arrow {
  border-top-color: var(--map-col-buttons);
}

.map-tooltip.right .tooltip-arrow {
  border-right-color: var(--map-col-buttons);
}

.map-tooltip.left .tooltip-arrow {
  border-left-color: var(--map-col-buttons);
}

.map-tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--map-col-buttons);
}

.map-tooltip .tooltip-inner {
  padding: 0.3rem;
  background-color: var(--map-col-buttons);
}

/* ---- BUTTON ---- */

.map-view__button {
  /* override default button styles */
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  border: 0;
  border-radius: var(--map-border-radius);
  background: var(--map-col-buttons);
  color: var(--map-col-text);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  /* temp */
  margin-right: -1px !important;
}

.map-view__button:hover {
  filter: brightness(1.2);
}

.map-view__button--emphasis {
  background: var(--map-col-buttons-emphasis);
  padding: 0.5rem 0.55rem;
  font-weight: 900;
  font-size: 1rem;
}

/* ---- BADGE ---- */

.map-view__badge{
  padding: 0.4em 0.5em 0.3em 0.55em;
  margin: 0 -0.2rem 0 0.3rem;
  font-size: 0.62rem;
  background-color: var(--map-col-bkg-lighter);
  color: var(--map-col-text);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  filter: brightness(1.3);
  border-radius: var(--map-border-radius);
  line-height: 100%;
  font-weight: 500;
}

.map-view__badge--blue{
  background-color: var(--map-col-blue);
  filter: none;
}

.map-view__badge--green{
  background-color: var(--map-col-green);
  filter: none;
}

.map-view__badge--yellow{
  background-color: var(--map-col-yellow);
  color: var(--map-col-bkg-lighter);
  filter: none;
  font-weight: 600;
  opacity: 0.9;
}
.map-view__badge--contrast{
  background-color: var(--map-col-text);
  color: var(--map-col-bkg);
  opacity: 0.8;
  font-weight: 600;
}


/*****************************************************************************************
 *
 * Containers
 *
 * Top-level containers for the elements within a Map View
 *
 */

/* The outer-most container for the 3D/2D Map View */

.map-view {
  --headerHeight: 80px;
  position: relative;
  height: 100%;
  min-height: calc(100vh - var(--headerHeight));
  width: 100%;
  display: grid;
  box-sizing: border-box;
}

/* On larger screens, the toolbar should 'squish' the map, not overlap it */
@media only screen and (min-width: 768px) {
  .map-view {
    grid-template-columns: auto minmax(0, 100%);
    justify-content: start;
  }
}

.map-view * {
  box-sizing: inherit;
}

/* The containers for the elements within the Map View */

.map-view__map-widget-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* So the map widget is underneath the links/tabs on larger screens (the toolbar should 'squish' the map, not overlap it) */
@media only screen and (min-width: 768px) {
  .map-view__map-widget-container {
    order: 1;
    position: relative;
    width: calc(100% + var(--map-toolbar-link-width) + (2* var(--map-size-toolbar-inter-link-margin)));
    margin-left: calc(-1 * var(--map-toolbar-link-width) - (2* var(--map-size-toolbar-inter-link-margin)));
  }
}

.map-view__scale-bar-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* required to be placed above map widget in firefox: */
  z-index: 1;
}

.map-view__toolbar-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* required to be placed above map widget in firefox: */
  z-index: 1;
}

/* On large screens, the toolbar should not overlap the map, it should squish it */
@media only screen and (min-width: 768px) {
  .map-view__toolbar-container {
    order: 0;
    position: relative;
    display: flex;
    flex-grow: 1;
  }
}

.map-view__feature-info-container {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Make sure the entire panel is visible always. Leave 5rem for scale bar. */
  max-height: calc(100% - 5rem);
  overflow: auto;
  /* required to be placed above map widget in firefox: */
  z-index: 1;
}

.map-view__layer-details-container {
  position: absolute;
  left: 0;
  bottom: 0;
  /* Don't allow the panel to expand beyond the map view */
  max-height: 100%;
  overflow: auto;
  /* required to be placed above map widget in firefox: */
  z-index: 1;
}

/*****************************************************************************************
 *
 * Cesium Widget
 *
 * The part that renders the 2D/3D map
 *
 */

.cesium-widget-view {}

.cesium-widget-view>.cesium-widget {
  width: 100%;
  height: 100%;
}

.cesium-widget>canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*****************************************************************************************
 *
 * Scale Bar
 *
 * The legend that shows both the coordinates of the mouse and a scale bar
 *
 */

.scale-bar {
  width: max-content;
  min-width: 12rem;
  min-height: 2rem;
  background: var(--map-col-bkg);
  border-radius: var(--map-border-radius);
  color: var(--map-col-text);
  opacity: 0.7;
  font-size: 0.8rem;
  padding: 0.18rem 0.8rem;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: auto auto;
  gap: 1rem;
  align-items: center;
}

/* __coordinates contains __longitude, __latitude, and __elevation */

.scale-bar__coordinates {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: auto auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* The elements that contain the current coordinates */

.scale-bar__label {
  font-weight: 800;
}

/* The __scale element contains __bar and __distance */

.scale-bar__scale {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* The length of the __bar element is set dynamically in ScaleBarView. It's length
represents 1 unit of the given distance measurement. */

.scale-bar__bar {
  height: 4px;
  border-radius: 1px;
  transition: width 0.3s;
  background-color: var(--map-col-text);
}

/* The elements that contains the distance measurement */

.scale-bar__distance {}

/*****************************************************************************************
 *
 * Toolbar
 *
 * The toolbar contains the layer list and UI for changing map settings
 *
 */

.toolbar {
  display: grid;
  grid-auto-flow: column;
  color: var(--map-col-text);
}

.toolbar__toggle {
  width: 1.9rem;
  align-self: flex-end;
  padding: 0.4rem;
  font-size: 1.25rem;
  background-color: transparent;
  opacity: 0.6;
  margin-bottom: 0.5rem;
  margin-right: -0.3rem;
}

.toolbar__links {
  display: flex;
  flex-direction: column;
  height: min-content;
  background-color: var(--map-col-bkg);
  border-radius: var(--map-border-radius);
  margin: var(--map-size-toolbar-inter-link-margin);
}

.toolbar__all-content {
  background-color: var(--map-col-bkg);
  width: var(--map-width-toolbar);
  padding: 0.8rem;
  box-shadow: var(--map-shadow-md);
  flex-direction: column;
  /* Don't display the content unless the toolbar is open. The outermost element, with
  class .toolbar, is not hidden so that the links (tabs) are still visible when the
  toolbar is closed */
  display: none;
}

.toolbar--open .toolbar__all-content {
  display: flex;
}

.toolbar__content {
  /* TODO: remove temp styles */
  height: 100%;
  width: 100%;
  justify-content: center;
  /* hide unless the content section is active */
  display: none;
}

.toolbar__content--active {
  padding-top: 1rem;
  display: flex;
}

.toolbar__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: var(--map-size-toolbar-link);
  width: var(--map-size-toolbar-link);
  background-color: var(--map-col-bkg);
  border-radius: var(--map-border-radius);
  padding: 0.2rem;
  margin: var(--map-size-toolbar-link-margin);
}

.toolbar__link:hover {
  background-color: var(--map-col-bkg-lighter)
}

.toolbar__link--active {
  background-color: var(--map-col-highlight)
}

.toolbar__link--active:hover {
  background-color: var(--map-col-highlight)
}

.toolbar__link-title {
  position: absolute;
  left: calc(100% + 1rem);
  color: var(--map-col-text);
  margin-top: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  /* don't show the link title until the link is hovered */
  display: none;
}

.toolbar__link:hover .toolbar__link-title {
  display: block;
  border-radius: var(--map-border-radius);
  background-color: var(--map-col-bkg);
  padding: 0.2rem 0.6rem
}

.toolbar__link-icon {
  font-size: 1.4rem;
  line-height: 100%;
}

/*****************************************************************************************
 *
 * Layers List
 *
 * Layers contains information about a map's layers and is used as a toolbar section
 *
 */


.layer-list {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  gap: 0.8rem;
  width: 100%;
  height: min-content;
}

/* A layer-item is one item in the layer-list */

.layer-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto max-content min-content;
  align-items: center;
}

.layer-item__label {
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  margin-right: 0.4rem;
  display: flex;
  align-items: center;
}

.layer-item__icon {
  fill: currentColor;
  height: 1.04rem;
  width: auto;
  margin-right: 0.34rem;
  opacity: 0.8;
}

.layer-item__icon>svg {
  height: 100%;
  width: auto;
}

.layer-item__label:hover {
  color: var(--map-col-highlight);
}

.layer-item__visibility-toggle {
  background: none;
  opacity: 0.85;
  padding: 0;
  margin-left: 0.5rem;
}

.layer-item__visibility-toggle:before {
  /* use the font awesome 'eye-open' icon */
  font-family: FontAwesome;
  content: "\f06e";
}

.layer-item__visibility-toggle:hover {
  opacity: 0.5;
}

/* How to style the layer item when the layer details panel is showing for this item */

.layer-item--selected .layer-item__label {
  color: var(--map-col-highlight);
  font-weight: 700;
}

/* How to style the layer item when the layer is hidden on the map */

.layer-item--hidden {
  opacity: 0.3;
}

.layer-item--hidden .layer-item__visibility-toggle:before {
  /* switch to the font awesome 'eye-closed' icon */
  content: "\f070";
}

/*****************************************************************************************
 *
 * Layer Details
 *
 * A panel that shows details about a specific layer on a map
 *
 */

.layer-details {
  width: var(--map-width-toolbar);
  border-top-right-radius: var(--map-border-radius);
  border-top-left-radius: var(--map-border-radius);
  padding: 0.4rem 0.8rem;
  background-color: var(--map-col-bkg-lighter);
  color: var(--map-col-text);
  box-shadow: var(--map-shadow-md);
  grid-template-columns: auto min-content;
  grid-template-rows: min-content auto;
  row-gap: 1rem;
  column-gap: 0.5rem;
  align-items: center;
  /* Don't show the details panel unless it also has the layer-details--open class */
  display: none;
}

.layer-details--open {
  display: grid;
}

.layer-details__label {
  /* the important is needed to overwrite more specific styles set on portal title tags */
  color: var(--map-col-text) !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  width: 100%;
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 60%;
}

.layer-details__toggle {
  padding: 0.4rem;
  font-size: 1.3rem;
  background-color: transparent;
  opacity: 0.6;
}

/* The notification div holds a badge & message, if one is set */
.layer-details__notification {
  margin: -0.2rem 0 0.9rem 0;
  padding: 0.3rem 0.5rem;
  background-color: var(--map-col-buttons);
  border-radius: var(--map-border-radius);
}

.layer-details__notification--blue{
  background-color: var(--map-col-blue);
  filter: none;
}

.layer-details__notification--green{
  background-color: var(--map-col-green);
  filter: none;
}

.layer-details__notification--yellow{
  background-color: var(--map-col-yellow);
  color: var(--map-col-bkg-lighter);
  filter: none;
  opacity: 0.9;
}
.layer-details__notification--contrast{
  background-color: var(--map-col-text);
  color: var(--map-col-bkg);
  opacity: 0.95;
}

.layer-details__sections {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  gap: 0.5rem;
  grid-column: 1 / 3;
}

.layer-detail {
  display: grid;
  grid-template-columns: auto 2rem;
  grid-template-rows: auto auto;
  align-items: center;
}

.layer-detail__label {
  /* the important is needed to overwrite more specific styles set on portal title tags */
  color: var(--map-col-text) !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 100%;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}

.layer-detail__content {
  grid-column: 1 / 3;
  /* Do not display this contents of this detail section unless the open class is added */
  display: none;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}

.layer-detail--open .layer-detail__content {
  display: flex;
}

.layer-detail--no-header .layer-detail__content {
  margin-top: 0;
  justify-self: center;
}

.layer-detail__toggle {
  --toggle-size: 1.7rem;
  display: block;
  width: var(--toggle-size);
  height: var(--toggle-size);
  /* background: none; */
}

.layer-detail__toggle:before {
  /* use the font awesome chevron icon */
  display: block;
  font-family: FontAwesome;
  content: "\f078";
  transform: rotate(0deg);
  transition-duration: 0.5s;
  transition-property: transform;
  font-size: 0.8rem;
}

.layer-detail--open .layer-detail__toggle:before {
  transform: rotate(180deg);
}

.layer-info {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  gap: 1.2rem;
}

.layer-info__description {
  font-size: 0.91rem;
  line-height: 1.33;
  max-height: 22rem;
  overflow: auto;
}

.layer-info__attribution {
  font-size: 0.8rem;
  line-height: 1.3;
  opacity: 0.8;
}

.layer-info__links {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.layer-info__link {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
}

.layer-opacity {
  min-height: 3rem;
  display: grid;
  align-content: center;
  width: 90%;
}

.layer-opacity__slider {
  min-height: 6px;
  border-radius: var(--map-border-radius);
  background: var(--c-neutral-3);
  position: relative;
  background-color: var(--map-col-buttons);
}

.layer-opacity__range {
  border-radius: var(--map-border-radius);
}

.layer-navigation {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* The shaded part of the slider that stretches from 0 to the current opacity */

/* Note that the range is also styled in the main metacatui CSS file, using the range's
other class: .ui-slider-range */

.layer-opacity__range {}

/* The draggable handle element */

/* Note: the handle for the slider is also styled in the main metacatui CSS file, using
  the handle's other class: .ui-slider-handle */

.layer-opacity__handle {
  /* Set the margin to half the width of the handle so that it doesn't slide outside of
  the bar */
  margin-left: -1em;
  /* The handle contains a div with the current opacity value (class
  layer-opacity__label). Centre it within the handle. */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* The element that displays the current opacity as a percentage */

.layer-opacity__label {
  font-size: 0.8em;
  /* Show the opacity value just below the slider handle */
  margin-top: 2.5em;
  color: var(--map-col-text);
}

/*****************************************************************************************
 *
 * Feature Info
 *
 * The box that shows more information about a feature that a user clicks. The content is
 * formatted according to a configurable template. Available templates include:
 *
 *     - table: A 2 column table that lists the key and value for each of the properties in a feature
 *     - story: Intended to display a user friendly summary of the data in the feature. Includes a title, sub-title, description, image and link.
 *
 */

.feature-info {
  width: var(--map-width-toolbar);
  border-top-right-radius: var(--map-border-radius);
  border-top-left-radius: var(--map-border-radius);
  padding: 1rem 0.8rem 1rem 0.8rem;
  row-gap: 0.8rem;
  background-color: var(--map-col-bkg-lighter);
  color: var(--map-col-text);
  box-shadow: var(--map-shadow-md);
  grid-template-columns: auto 2.5rem;
  grid-template-rows: min-content auto min-content;
  justify-items: center;
  /* Don't show the details panel unless it also has the feature-info--open class */
  display: none;
}

.feature-info--open {
  display: grid;
}

.feature-info__label {
  color: var(--map-col-text) !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  width: 100%;
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 60%;
}

.feature-info__content {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  gap: 1rem;
  grid-column: 1 / 3;
  padding-bottom: 0.5rem;
  overflow: scroll;
}

.feature-info__toggle {
  padding: 0.4rem 0.6rem 0.4rem;
  font-size: 1.25rem;
  background-color: transparent;
  opacity: 0.6;
  justify-self: end;
}

.feature-info__buttons {
  grid-column: 1 / 3;
  display: grid;
  gap: 0.5rem;
}

/* styles for the (default) table template */

.feature-info__table {
  /* TODO: use colour vars */
  background-color: var(--map-col-bkg-lightest);
  border-radius: var(--map-border-radius);
  box-shadow: var(--map-shadow-md);
  width: calc(var(--map-width-toolbar) - 2.2rem);
}

/* .feature-info__table-body {} */

.feature-info__table-row {
  padding-bottom: 0.6rem;
  border: 1px solid #FFFFFF0D;
  border-top-right-radius: var(--map-border-radius);
}

.feature-info__table-row:nth-child(even) {
  background-color: var(--map-col-bkg-lighter);
}

.feature-info__table-cell {
  padding: 0.6rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: calc((var(--map-width-toolbar)/2) - 1rem);
}

/* styles for the story template */

.feature-info__thumbnail {
  min-width: 6rem;
  min-height: 6rem;
  max-width: 50%;
  float: right;
  margin: 0.3rem;
  border-radius: var(--map-border-radius);
  box-shadow: var(--map-shadow-md);

}

.feature-info__subtitle {
  font-size: 0.9em;
  text-transform: uppercase;
  display: block;
  opacity: 0.85;
  margin: 0;
  padding: 0;
}

.feature-info__description {
  margin: 0.55rem 0;
  font-size: 0.9rem;
  line-height: 1.4rem;
}

.feature-info__link {
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  font-weight: bold;
  text-decoration: none;
}


/*****************************************************************************************
 *
 * Map Legend
 *
 * Legends for vector layers in the map
 *
 */

.map-legend--preview {
  height: 1.2rem;
  width: 100%
}

.map-legend__svg--preview {
  height: 100%;
  width: auto;
}

.map-legend__img--preview {
  --img-overflow: 0.8rem;
  /* allow images previews to bleed into the padding a little, so that more detail is visible */
  height: calc(100% + var(--img-overflow));
  max-width: 100%;
  margin-top: calc(-0.5* var(--img-overflow));
  border-radius: 3px;
  box-shadow: var(--map-shadow-md);
  /* imagery appears lighter on the map */
  filter: brightness(1.75);
}