/* Box Cover Art
 * -------------------------------------------------------------------------- */

.box-cover .inbox-heading__header {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.box-cover__content { overflow: auto; }

.box-cover__content,
.box-cover__content-swap,
.box-cover-tray__content {
  background-color: var(--color-bg--sheet);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.box-cover__content,
.box-cover__content-swap {
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  cursor: pointer;
}

.box-cover__content--animated {
  @media (prefers-reduced-motion: no-preference) {
    animation: slide-in-from-bottom-no-fade 0.33s ease both;
  }
}

.box-cover__content-swap {
  animation: none;
  z-index: 3;
  display: flex;
}

/* Box Cover Art Tray
 * -------------------------------------------------------------------------- */

.box-cover-tray {
  display: none;
  width: 100%;
  text-align: center;
  position: absolute;
  top: -3rem;
  z-index: -1;

  @media (min-width: 40em) { padding: 0 var(--page-padding); }
}

.box-cover-tray__content {
  display: none;
  height: 4rem;
  max-width: var(--content-width);
  margin: 0 auto;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  overflow: hidden;
  cursor: pointer;

  @media (prefers-reduced-motion: no-preference) {
    animation: slide-in-from-bottom-no-fade 0.33s ease both;
  }
}

/* Settings Menu
 * -------------------------------------------------------------------------- */

.box-cover__menu {
  position: absolute;
  top: var(--page-padding);
  right: calc(var(--sheet-padding) + 1rem);
  z-index: 5;

  @media (max-width: 39.95em) { right: calc(var(--sheet-padding) / 2); }
}

.btn.box-cover__peek-toggle {
  position: absolute;
  top: -1em;
  left: -999em;
  z-index: 5;
  background: var(--color-bg--sheet);

  &::before {
    background-size: 0.85em;
  }

  &:focus {
    left: calc(50% - 1em);
  }
}

.box-cover__uncover {
  display: none;
}

/* Preset covers
 * -------------------------------------------------------------------------- */

.box-cover-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-gap: 1rem;

  [role=menuitem],
  form {
    display: contents;
  }
}

.box-cover-preset {
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  text-indent: -999em;
  min-height: 6rem;
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
}

[data-box-cover-preset="blobs"] {
  background-image: url("/assets/box-covers/light/blobs-3d805cc4.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/blobs-f923328e.svg"); }
}

[data-box-cover-preset="grid"] {
  background-image: url("/assets/box-covers/light/grid-52557b63.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/grid-6366dd60.svg"); }
}

[data-box-cover-preset="peace"] {
  background-image: url("/assets/box-covers/light/peace-14dc3ac1.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/peace-c8bc962c.svg"); }
}

[data-box-cover-preset="terrazzo"] {
  background-image: url("/assets/box-covers/light/terrazzo-69c20d9d.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/terrazzo-c001e947.svg"); }
}

[data-box-cover-preset="topo"] {
  background-image: url("/assets/box-covers/light/topo-0d12d822.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/topo-ab0c38be.svg"); }
}

[data-box-cover-preset="waves"] {
  background-image: url("/assets/box-covers/light/waves-6b7913e3.svg");
  [data-color-scheme="dark"] & { background-image: url("/assets/box-covers/dark/waves-c021f7f7.svg"); }
}

[data-box-cover-preset=""] {
  background-image: var(--uploaded-image);
}

/* Interactive States
 * -------------------------------------------------------------------------- */

.inbox--with-sections article.posting:last-of-type:not([data-seen]) { padding-bottom: 11rem; } /* Preserves bottom padding when no seens present */
.inbox--with-sections article.posting:last-of-type:not([data-seen]) ~ .pagination-link { display: block !important; } /* Enables pagination when no seens present */

.sheet--box-cover-active {
  .inbox--with-sections .box-cover[data-seen] ~ [data-seen] { display: none; }  /* Hides all seen items except cover art */
  .pagination-link { display: none !important; } /* Disables pagination when covered */
  .box-cover { min-height: 100vh; }
  .box-cover__content { display: block; }
  .box-cover__uncover { display: block; }
  .box-cover-tray { display: block; }

  .box-cover__menu-btn {
    background-color: var(--color-bg--sheet);
    opacity: 0.6;
    &::before { filter: var(--colorize-ink); }
  }

  .box-cover__menu {
    right: var(--page-padding);
    top: var(--page-padding);
  }
}

.sheet--box-cover-peeking {
  .inbox--with-sections .box-cover[data-seen] ~ [data-seen] { display: block; } /* Shows all seen items while peeking */
  .pagination-link { display: block !important; }                     /* Allows pagination when peeking */
  .box-cover { min-height: 0; }
  .box-cover__menu { display: none; }
  .box-cover__content { height: 0; }
  .box-cover-tray__content { display: block; }

  .box-cover__peek-toggle {
    left: calc(50% - 1em);
    &::before { background-image: url("/assets/icons/arrow-up-c42cf73c.svg"); }
  }
}