/* Sheet
 * A content container box for reuse
 * -------------------------------------------------------------------------- */

.sheet {
  --sheet-padding: var(--size-4);
  padding: var(--sheet-padding);
  background: var(--surface-2);
  margin: 0 calc(var(--size-4) * -1) 0;
  width: calc(100% + (var(--size-4) * 2));
  border-radius: 0;
  position: relative;

  @media (min-width: 40em) {
    --sheet-padding: var(--size-6);
    margin: 0 auto 2em;
    width: min(95%, var(--size-page));
    border-radius: var(--radius-3);
  }

  @media (min-width: 60em) {
    --sheet-padding: var(--size-8);
  }
}
.trix-content {
  max-width: 65ch !important;
  margin-inline: auto;
}


/* Sheet Variants */

.sheet--thin {
  @media (min-width: 60em) {
    --sheet-padding: var(--size-6);
  }
}

.sheet--transparent {
  background: transparent;

  @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--flat\@mobile\@small {
  @media (max-width: 480px) {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

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

.sheet--translucent {
  opacity: 0.98;
}

/* World-specific variants */
.sheet--world,
.sheet--world-composer {
  max-width: 800px;
  margin: 0 auto;
}

.sheet--world-perma {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
}

/* Expandable sheets */
.sheet--expandable {
  .sheet__collapsed-content { display: inherit; }
  .sheet__expanded-content { display: none; }

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

/* Sheet Actions - buttons in corners */
.sheet-actions {
  position: absolute;
  display: flex;
  z-index: 7;
  font-size: var(--font-size-1);
  top: 0;
  right: 0;
  gap: var(--size-2);

  @media (min-width: 40em) {
    top: calc(var(--size-4) * -1) !important;
    right: calc(var(--size-4) * -1) !important;
  }

  @media (min-width: 60em) {
    top: calc(var(--size-6) * -1) !important;
    right: calc(var(--size-6) * -1) !important;
  }
}

.sheet-actions--left {
  left: 0;
  right: auto;

  @media (min-width: 40em) {
    left: calc(var(--size-4) * -1) !important;
  }

  @media (min-width: 60em) {
    left: calc(var(--size-6) * -1) !important;
  }
}