@import '../../styles/common.scss';

.container {
  @include boxSizing;

  height: calc(100vh - #{$header-height});
  display: grid;
  grid: min-content 1fr / auto 1fr;

  overflow: hidden;

  background-color: var(
    --explorer-background-color,
    $explorer-background-color
  );

  // Place PageHeader at the top
  > div:first-child {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }

  // Extend all components, except PageHeader, to the bottom
  // Enable scrolling on these components
  > div:not(:first-child) {
    grid-row: 2 / -1;
    overflow-y: auto;
    scrollbar-width: thin; //for Firefox only
  }

  //Custom scrollbar for Chrome, Safari and Edge
  ::-webkit-scrollbar {
    width: var(--scrollbar-size, $scrollbar-size);
    height: var(--scrollbar-size, $scrollbar-size);
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, $scrollbar-track-color);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(
      --scrollbar-thumb-hover-color,
      $scrollbar-thumb-hover-color
    );
  }

  ::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
  }

  &.hasStationError {
    grid-template-rows: min-content min-content 1fr;

    // order of the following props is important

    // rest of components
    > div:not(:first-child) {
      grid-row: 3 / -1;
    }

    // error message bar
    > div:nth-child(2) {
      grid-column: 1 / -1;
      grid-row: 2 / 3;

      overflow: unset;
    }
  }

  &.modalMode {
    width: calc(100vw - 30px - 30px);
    height: calc(100vh - #{$header-height} - 30px);
  }

  .filtersHidden {
    grid-column: 1 / -1;
  }
}
