:root {
  --side-width:     #{$side-width};
  --side-padding:   #{$side-padding};

  --main-width:     #{$main-width};
  --main-padding:   #{$main-padding};
  --app-width:      calc(var(--main-width) + var(--side-width));
  --half-pad:       calc((100% - var(--app-width)) / 2);
  --half-main-pad:  calc((100% - var(--main-width)) / 2);
  --head-pad: 0px;
  --sidebar-toggle-opacity: 1;
}

#site {
  --side-total: calc(var(--half-pad) + var(--side-width));
  --main-total: calc(var(--half-pad) + var(--main-width));
  --side-margin: 0px;
  --main-pad-right: var(--half-pad);
  --main-pad-left: 0px;
  --main-margin: 0px;
  --side-transition:  300ms ease-in-out;
  position: relative;
  color: var(--body-color);
  background-color: var(--body-background);
  &.no-sidebar, &[data-sidebar="closed"] {
    --side-margin: calc(0px - max(var(--side-total), var(--side-width)));
    --main-total: 100%;
    --main-pad-right: var(--half-pad);
    --main-pad-left: var(--half-pad);
    --sidebar-toggle-opacity: 0.4;
  }
}

#app {
  --app-height: calc(100vh - #{$header-height});
  position: relative;
  width: 100%;
  height: var(--app-height);
  padding: 0;
  display: flex;
  & > aside,
  & > main {
    transition: all 0.2s;
    overflow-y: scroll;
    transition: background-color $theme-transition ease-in-out;
  }
  & > aside {
    width: max(var(--side-width), var(--side-total));
    padding: var(--side-padding);
    padding-left: max(var(--side-padding), var(--half-pad));
    margin-left: var(--side-margin);
    border-right: 1px solid var(--side-border);
    background-color: var(--side-back);
    box-shadow:
      inset 0 6px 4px -4px var(--top-shadow),
      inset -2px 0 2px var(--side-shadow);
    transition:
      margin-left var(--side-transition),
      background-color $theme-transition ease-in-out;
  }
  & > main {
    margin-left: 0;
    width: var(--main-total);
    padding: 1.5rem 3rem 3rem 3rem;
    padding-top: 3rem;
    padding-right: max(var(--main-padding), var(--main-pad-right));
    padding-left: max(var(--main-padding), var(--main-pad-left));
    box-shadow:  2px 4px 6px var(--top-shadow);
    background-color: var(--main-back);
    transition:
      width var(--side-transition),
      padding-left var(--side-transition),
      padding-right var(--side-transition);
    &.wide {
      margin-left: 0;
      flex-basis: 100%;
    }
  }
  .section {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 0 0.5em;
    text-align: left;
  }
}

@media (max-width: $head-width) {
  :root {
    --head-pad: #{$head-padding};
  }
}

@media only screen and (max-width: #{$tablet}) {
  #site {
    --sidebar-width: min(80vw, #{$side-width});
    #app {
      & > aside {
        position: fixed;
        z-index: 1000;
        width: var(--sidebar-width);
        margin: 0;
        margin-left: var(--sidebar-margin-left, 0);
        height: var(--app-height);
        overflow-y: scroll;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
      }
      & > main {
        transition: background-color $theme-transition ease-in-out;
      }
    }
    &.no-sidebar, &:not([data-small-screen-sidebar="open"]) {
      --sidebar-margin-left: calc(0rem - var(--sidebar-width));
      --sidebar-toggle-opacity: 0.5;
    }
    &[data-small-screen-sidebar="open"]:not(.no-sidebar) {
      --sidebar-margin-left: 0px;
      --sidebar-toggle-opacity: 1;
    }
    & > footer > nav > * {
      display: block;
      width: 100%;
    }
  }
}

* {
  scroll-margin-top: $header-height + 8px;
}