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

.lowerSection {
  padding: var(--content-padding);
}

.lowerSectionMobileTabbed {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  position: relative;
  bottom: 0;
  width: 100%;

	@include screen(tablet) {
		top: 0;
    position: relative;

		&.online {
			position: absolute;
			top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));

			// As we want content in the tabs to scroll within itself, force the tabs to display max height at all times.
			// (We don't have to do this when not-online because we're having the entire layout scroll.
			:global(.ant-tabs-content) {
				 height: 100% !important;
			}
		}
  }

  :global(.ant-tabs-nav) {
    margin-bottom: 0px;
    padding-top: 0.5vh;
    padding-left: 1vw;
  }
}

.lowerSectionMobileNoTabs {
  padding-top: 20px;
}

.topSectionElement {
  background-color: var(--theme-color-components-video-background);
  @include screen(tablet) {
    // "sticks" the stream to the top of the page
    position: sticky;
    z-index: 100;
  }
}

.offlineBanner {
  color: var(--theme-color-background-main);
}

.mobileActionButtonMenu {
  display: none;

  @include screen(tablet) {
    display: block;
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 199;
  }
}

.desktopActionButtons {
  display: block;

  @include screen(tablet) {
    display: none;
  }
}

//not sure if this is needed
.statusBar {
  flex-shrink: 0;
}

// not sure if this is needed
.loadingSpinner {
  display: grid;
}

.defaultTabBar {
  width: 85%;
}

.bottomPageContentContainer {
  background-color: var(--theme-color-components-content-background);
  padding: calc(2 * var(--content-padding));
  border-radius: var(--theme-rounded-corners);
  width: 100%;
  margin-bottom: 20px;

  h1,
  h2,
  h3 {
    line-height: 2rem;
  }

  h1:first-child,
  h2:first-child,
  h3:first-child {
    margin-top: unset;
  }
}
.offlineBanner {
  color: var(--theme-color-background-main);
}