@import '../styles/colors.scss';
@import '../styles/sizes.scss';

.container {
  display: grid;

  @media only screen and (max-width: 767px) {
    gap: 20px;
    grid-auto-flow: column;
    grid-auto-columns: 100%;

    // Hide Scrollbar and let's use tabs to navigate
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;

    > * {
      scroll-margin-top: $header-height + $body-vertical-padding;
      scroll-snap-align: start;
    }
  }

  @media only screen and (min-width: 768px) {
    grid-template-columns: 0.75fr 1.5fr 0.75fr;
    gap: 30px;
  }
}

.sidesWrap {
  position: relative;

  // HACK: Stop grid column from growing
  min-width: 0;
}

.sides {
  @media only screen and (min-width: 768px) {
    position: sticky;
    top: $header-height + $body-vertical-padding;
  }
}

.files {
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}
.content {
  padding: 10px;
  border: 10px solid $overlay-background-color;
  border-radius: 4px;

  @media only screen and (max-width: 767px) {
    max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
    overflow-y: auto;
  }
}

.navTabs {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: $overlay-background-color;
  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);

  padding: 5px;
  gap: 5px;

  @media only screen and (max-width: 767px) {
    display: flex;
  }

  > li {
    flex-grow: 1;
  }
}

.active {
  background-color: $primary-main !important;
  color: white !important;
}