/* Body class "mock-embed" used for testing as if embedded in-game */

body.mock-embed::before {
    background-color: #090300;
    background-image: url('../mock-embed/game-main.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    right: 385px;
    top: 0;
}

body.mock-embed::after {
    background-color: #090300;
    background-image: url('../mock-embed/game-side.jpg');
    background-repeat: no-repeat;
    content: '';
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 385px;
}

body.mock-embed {
    display: flex;
    justify-content: center;
    padding: 25px calc(385px + 50px) 75px 25px;
}

body.mock-embed .example-wrapper {
    max-width: 1400px;
    padding: calc(60px + 25px) 35px 35px 35px;
    position: relative;
    width: 100%;
}

body.mock-embed .example-wrapper::before {
    backdrop-filter: blur(4px);
    background-color: var(--color-black-faded-50);
    bottom: 0;
    clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0px 100%);
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

body.mock-embed .example-wrapper::after {
    border-left: 5px solid var(--color-highlight);
    content: "Influence CSS Example";
    font-size: 24px;
    height: 60px;
    left: 0;
    line-height: 60px;
    padding-left: 30px;
    position: absolute;
    top: 0;
}

body.mock-embed .example-main {
    height: 100%;
    overflow: auto;
    position: relative;
}

/* Body class "embed" used for actual embedding via iframe - e.g. transparent background */

body.embed {
    background-color: unset;
}

/* Body without the "mock-embed" or "embed" classes used for standalone website, without embedding */

body {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Example styles */

.example-main {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.example-row {
    align-items: flex-start;
    display: flex;
    gap: 50px;
}

.example-row.example-row-compact {
    gap: 25px;
}

.example-row.example-centered {
    align-items: center;
}

.example-column {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.example-list-header {
    margin-bottom: 25px;
}

ul.list-expanding-items {
    max-height: calc(7 * var(--list-item-height));
    width: 240px;
}

ul.list-expanding-items li .item-expand {
    color: var(--color-gray-dark);
}