:root {
  --page-padding: 1.6rem;
  --negative-page-padding: -1.6rem;
}

/* .page wraps every page in the app as part of layouts/application.html.erb */
.page {
  width: 100%;
  max-width: var(--content-width);
  min-height: calc(100vh - var(--body-padding) - (var(--page-padding) * 2));
  padding: var(--page-padding);
  margin: 0 auto;
  position: relative;
}

/* .page__content allows us to control content width independent of .page width. */
.page__content {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Page modifiers
 * -------------------------------------------------------------------------- */

.page--padded-bottom { padding-bottom: 10rem; }
.page--unpadded-bottom { padding-bottom: 0; }

.page--unpadded-sides {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page--inbox .page__content {
  min-height: calc(100vh - var(--body-padding) - var(--page-padding));
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  margin-bottom: calc(var(--page-padding) * -1);

  @media (min-width: 40em) {
    min-height: calc(100vh - var(--body-padding) - 2rem);
    margin-bottom: -2rem;
  }

  @media (min-width: 60em) {
    min-height: calc(100vh - var(--body-padding) - 3rem);
    margin-bottom: -3rem;
  }
}

/* Allows the content to be extra narrow on medium+ screens without impacting the actual .page */
.page--narrow\@medium {
  @media (min-width: 40em) {
    .page__content { max-width: 40rem; }
  }
}

/* Allows the content to be small-sized on medium+ screens without impacting the actual .page */
.page--small\@medium {
  @media (min-width: 40em) {
    .page__content { max-width: 52rem; }
  }
}

/* Allows the content to be medium-sized on medium+ screens without impacting the actual .page */
.page--medium\@medium {
  @media (min-width: 40em) {
    .page__content { max-width: 64rem; }
  }
}

.page--full-width {
  max-width: none;

  .page__content { max-width: none; }
}

.page--center {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
 }

/* Allows a .page to expand to the sides of the viewport on large+ screens */
.page--full-width\@large {
  @media (min-width: 60em) {
    max-width: none;
  }
}

/* Allows a .page to be a floating island that doesn't extend to the bottom on medium+ screens */
.page--island\@medium {
  @media (min-width: 40em) {
    min-height: auto;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
  }
}