@use "sass:meta";
@use "../../Sass/common/_variables";
@use "../../Sass/common/mixins";
@include mixins.empty-module("time-series-chart");

.section {
  composes: clearfix from "../../Sass/common/_base.scss";
  background: variables.$feature-info-section-bg;
  border-top: 1px solid variables.$dark-lighter;
}

.title {
  composes: btn from "../../Sass/common/_buttons.scss";
  color: variables.$feature-info-btn-color;
  position: relative;
  padding: 4px 30px 4px 8px;
  margin-right: 30px;
  width: 100%;
  background: variables.$feature-info-header-bg;
  min-height: 40px;
  margin: 0;
  border: none;
  text-align: left;
  span {
    display: block;
    font-weight: 300;
    font-size: variables.$font-size-mid-small;
  }
  svg {
    height: 10px;
    width: 10px;
    fill: #fff !important;
    float: right;
    position: absolute;
    top: 15px;
    right: 10px;
  }
}

.content {
  padding: variables.$padding-small;
  position: relative;

  // Can't change these to target classes because we're directly styling markup from cesium.
  table {
    @extend %clearfix;
    font-family: variables.$font-feature-info;
    max-width: 100%;
    @if meta.variable-exists(feature-info-table-width) {
      width: $feature-info-table-width;
    }
    border-collapse: collapse;
  }

  td {
    position: relative;
    border-collapse: collapse;
    border: variables.$feature-info-table-border-style;
    padding: 5px;
  }

  tr:nth-child(odd) {
    @if meta.variable-exists(feature-info-table-odd-row-bg) {
      background-color: $feature-info-table-odd-row-bg;
    }
  }
}

.raw-data-button {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-primary from "../../Sass/common/_buttons.scss";
  composes: btn--small from "../../Sass/common/_buttons.scss";

  width: auto;
  float: right;

  margin-bottom: 13px;
  margin-right: 1px;
  margin-top: 10px;
}