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

.sheet {
    --sheet-padding: var(--size-4);
    padding: var(--sheet-padding);
    background: var(--color-bg--surface);
    /* background: red; */
    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);
    }
}

.lexxy-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;
    }
}