/* Sheet
 * A drop shadowy box for reuse
 * -------------------------------------------------------------------------- */

.sheet {
  --sheet-padding: 1em;
  padding: var(--sheet-padding);
  background: var(--color-bg--sheet);
  box-shadow: 0 0 3rem var(--color-shadow);
  margin: 0 var(--negative-page-padding) 0;
  width: calc(100% + (var(--page-padding) * 2));
  border-radius: 0;
  position: relative;
  transition: box-shadow 0.3s ease-in-out;

  &.entry--unread { border-radius: 0.5em; }

  @media (min-width: 40em) {
    --sheet-padding: 2em;
    margin: 0 auto 2em;
    width: 100%;
    border-radius: 1.5em;

    [data-color-scheme="dark"] & { box-shadow: 0 0 3rem var(--color-almost-black); }
  }

  @media (min-width: 60em) {
    --sheet-padding: 5rem;

    &.sheet--thin {
      --sheet-padding: 2em;
    }
  }
}

.sheet--transparent {
  background: transparent;
  box-shadow: none;

  @media (min-width: 40em) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.sheet--vh {
  min-height: calc(100vh - 7.6rem);
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sheet--inbox {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 0;
}

.sheet--translucent {
  opacity: 0.98;
}

.sheet--world,
.sheet--world-composer {
  @media (min-width: 40em) {
    box-shadow: 0 3rem 5rem var(--color-bg--world-primary), 0 7rem 4rem var(--color-bg--world-secondary), 0 12rem 10rem var(--color-bg--world-tertiary) !important;
  }
}

.sheet--world-perma {
  margin-top: -3rem;

  @media (min-width: 60em) {
    margin-top: -7rem;
  }
}

/* Buttons in the top right corner of a sheet */
.sheet-actions {
  position: absolute;
  display: flex;
  z-index: 7;
  font-size: var(--font-size-small);
  top: 0;
  right: 0;

  @media (min-width: 40em) {
    top: -2rem !important;
    right: -2rem !important;
  }

  @media (min-width: 60em) {
    top: -3rem !important;
    right: -3rem !important;
  }

  .topic--spam & { display: none; }
}

/* Buttons in the top left corner of a sheet */
.sheet-actions--left {
  top: 0;
  left: 0;

  @media (min-width: 40em) {
    top: -2rem !important;
    left: -2rem !important;
  }

  @media (min-width: 60em) {
    top: -3rem !important;
    left: -3rem !important;
  }
}

.sheet--expandable {
  .sheet__collapsed-content { display: inherit; }
  .sheet__expanded-content { display: none; }

  &.sheet--expanded {
    .sheet__collapsed-content { display: none; }
    .sheet__expanded-content { display: inherit; }
  }
}


/* Calendars page */
.sheet__calendars {
  .hdg--left-icon::before {
    top: 0;
  }
}