@import '~assets/styles/shared'; // NOTE -- this is the ONLY location this file should be brought in w/out the `(reference)` directive

body,
html,
* {
  box-sizing: border-box;
}

body {
  background: @color-almostblack;
  overflow-y: hidden;

  @media @breakpoint-mobile {
    --is-mobile: true;
  }

  @media @breakpoint-mobile-small {
    --is-mobile-small: true;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: @roboto;
}

#root {
  height: 100%;
}

.App {
  display: grid;

  /* sidebar width */
  grid-template-columns: @top-bar-height auto;
  height: 100%;

  @media @breakpoint-mobile {
    /* disable sidebar mobile grid width */
    grid-template-columns: 0 auto;
  }
}

.App--blur {
  filter: blur(2px);
}

.Main {
  display: grid;
  grid-template-rows: @top-bar-height auto;
  height: 100vh;
  overflow: hidden;
  position: relative;

  @media @breakpoint-mobile {
    /* topbar mobile height */
    grid-template-rows: 1.5rem auto;
  }
}

.Main__wrap {
  display: grid;

  /* inner menubar width */
  grid-template-columns: 6.875rem auto;
  margin-left: -100px;
  overflow: hidden;

  @media @breakpoint-mobile {
    /*
    disable inner menubar mobile grid width */
    grid-template-columns: 0 auto;
    margin-left: 0;
  }
}

.Main__content {
  height: calc(~"100vh - @{top-bar-height}");
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;

  &.IncrHeight {
    height: calc(~"100vh - @{top-bar-height} - @{global-banner-height}");
  }

  &.IncrHeightDouble {
    height: calc(~"100vh - @{top-bar-height} - @{global-banner-height} - @{global-banner-height}");
  }

  &.MoveDown {
    padding-top: @inner-banner-height;
  }

  @media @breakpoint-mobile {
    height: calc(~"100vh - @{top-bar-height-mobile}");
    width: 100vw;

    &.MoveDown {
      padding-top: @inner-banner-height-mobile;
    }

    &.IncrHeight {
      height: calc(~"100vh - @{top-bar-height-mobile} - @{global-banner-height}");
    }

    &.IncrHeightDouble {
      height: calc(~"100vh - @{top-bar-height-mobile} - @{global-banner-height} - @{global-banner-height}");
    }
  }

  @media @breakpoint-mobile-small {
    &.MoveDown {
      padding-top: @inner-banner-height-mobile-small;
    }
  }
}

.SideBar {
  background: @color-purple;
  height: 100vh;
  position: relative;
  z-index: @mask-above;
}

.SideBar__mobile-bars {
  background: none;
  border: none;
  display: none;
  height: 2.25rem;
  left: 0.375rem;
  outline: none;
  padding: 0.625rem;
  position: absolute;
  top: 0.375rem;
  width: 2.25rem;
  z-index: @mask-above;

  svg {
    height: 100%;
    width: 100%;
  }

  @media @breakpoint-mobile {
    display: block;
  }
}

.App__loadingIndicator {
  background: @color-lighter-purple;
  display: none;
  height: 0.25rem;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 100;
}

svg.SideBar__mobile-bars-unseen {
  bottom: 1.4rem;
  position: relative;
  right: 0.35rem;
}

.TopBar {
  z-index: @above-all-content-above;

  @media @breakpoint-mobile {
    height: @top-bar-height-mobile;
  }
}

.TopBar__floatAbove {
  z-index: @above-all-content-top-layer;
}

.GlobalBanner {
  background-color: white;
  height: @global-banner-height;
  left: 0;
  position: static;
  right: 0;
  top: 0;
  z-index: 50;

  &.MoveDown {
    top: @global-banner-height;
  }

  @media @breakpoint-mobile {
    height: @global-banner-height-mobile;

    &.MoveDown {
      top: @global-banner-height-mobile;
    }
  }

  @media @breakpoint-mobile-small {
    height: @global-banner-height-mobile-small;

    &.MoveDown {
      top: @global-banner-height-mobile-small;
    }
  }
}

.InnerBanner {
  margin-top: @top-bar-height;

  @media @breakpoint-mobile {
    margin-top: @top-bar-height-mobile;
  }
}

.NotificationBar {
  margin-top: calc(~"@{inner-banner-height} + 12px + @{top-bar-height}");

  @media @breakpoint-mobile {
    margin-top: calc(~"@{inner-banner-height-mobile} + 6px + @{top-bar-height-mobile}");
  }

  @media @breakpoint-mobile-small {
    margin-top: calc(~"@{inner-banner-height-mobile-small} + 6px + @{top-bar-height-mobile}");
  }
}
