@use "sass:map";

.screen {
  // @include container-border;
  @extend .container-fluid;
  @extend .p-0;
  @extend .pt-3;
  @extend .pt-sm-0;

  @extend .d-flex;
  @extend .flex-column;
  @extend .flex-fill;

  min-width: $screen-width;
  max-width: $screen-width;

  min-height: 100%;
  height: max-content;
  // background-color: var(--bs-body-bg);
  // border-color: color.scale($border-color, $lightness: -25%);

  > div.title {
    @include container-title;
    @extend .start-50;
    @extend .translate-middle;

    top: map.get($spacers, 4);
    background: linear-gradient(
      to bottom,
      var(--bs-body-bg) 0%,
      var(--bs-body-bg) 50%,
      var(--bs-tertiary-bg) 50%,
      var(--bs-tertiary-bg) 100%
    );
  }
}

@include media-breakpoint-down(sm) {
  .screen {
    border: none;
    background-color: transparent;
    margin: 0;
    max-width: none;
    overflow: hidden;

    > div.title {
      top: map.get($spacers, 3);
    }
  }
}

// This controls if the screen takes up the full height
@include media-breakpoint-down(lg) {
  .screen {
    min-height: fit-content;
  }
}

$padding-base: 0rem;
$padding-base-offset: 2rem;

@include media-breakpoint-only(xxl) {
  $padding-base: calc($padding-base + $padding-base-offset);

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

// The .98 is something bootstrap was doing. I'm sure for a reason, I just don't know it yet
@media (min-width: 1599.98px) {
  $padding-base: calc($padding-base + ($padding-base-offset * 2));

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 1799.98px) {
  $padding-base: calc($padding-base + ($padding-base-offset * 4));

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 1999.98px) {
  $padding-base: 7%;

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 2399.98px) {
  $padding-base: 13%;

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 2699.98px) {
  $padding-base: 17%;

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 2999.98px) {
  $padding-base: 22%;

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

@media (min-width: 3299.98px) {
  $padding-base: 25%;

  .screen {
    padding: 0 $padding-base 0 $padding-base !important;
  }
}

.navigation-container {
  @include container-border;
  @extend .p-1;

  background-color: var(--bs-tertiary-bg);
}

@include media-breakpoint-down(sm) {
  .navigation-container {
    border-left: 0;
    border-right: 0;
  }
}