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

.root {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  background-color: var(--theme-color-background-main);

  @include screen(desktop) {
    height: var(--content-height);
  }

  .mainSection {
    display: flex;
    overflow-y: scroll;
    flex-direction: column;
  }

  .mainSection::-webkit-scrollbar {
    width: 5px;
    height: auto;
    background-color: var(--theme-color-components-scrollbar-background);
  }

  .mainSection::-webkit-scrollbar-thumb {
    background: var(--theme-color-components-scrollbar-thumb);
    border-radius: 1px;
  }

  .topSection {
    padding: 0;
    background-color: var(--theme-color-components-video-background);
  }
  .lowerSection {
    padding: 0em 2%;
    margin-bottom: 2em;
  }

  .lowerSectionMobile {
    padding: 0.3em;
  }
}

.leftCol {
  display: flex;
  flex-direction: column;
}

.loadingSpinner {
  display: grid;
}

.main {
  display: grid;
  flex: 1;
  height: 100%;
  grid-template-rows: 1fr auto;
}