@import '../../src/common';

$page-side-padding: 48px;
$scroll-top-threshold: 20px;
$page-background-color: rgba($D70, .95);
$image-container-offset: 30px;

.page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  background-color: $page-background-color;
}

.fixed-container {
  position: absolute;
  z-index: 2;
  min-height: 30px;
  box-sizing: border-box;
  margin: 0 auto;
  left: 0;
  width: 100%;
}

.page-header-container {
  padding-top: 30px;
  padding-bottom: $scroll-top-threshold;
  
  &.minimized {
    padding-top: 18px;
    padding-bottom: 18px;
    background-color: $page-background-color;
  }
  
  &.without-bottom-padding {
    padding-bottom: 0;
  }
}

.page-header {
  padding: 0 $page-side-padding;
  margin: 0 auto;
}

.tail {
  background-color: transparent;
  padding: $scroll-top-threshold $page-side-padding 0;
  margin: 0 auto;

  &.minimized {
    padding-top: 0;
  }
}

.scrollable-content {
  overflow: auto;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.image-background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: -$image-container-offset;
  bottom: -$image-container-offset;
  left: -$image-container-offset;
  right: -$image-container-offset;
  filter: blur(12px);
}

.image-background-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100%;
  height: 100%;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($D10, 0.42);
  }
}

.gradient-background {
  position: absolute;
  top: 0;
  width: 100%;
}

.content {
  position: relative;
  padding: 0 $page-side-padding;
  margin: 0 auto;
}

.content-placeholder {
  flex-shrink: 0;
  width: 100%;
}

.content-full-screen {
  padding-left: 0;
  padding-right: 0;
}