flip-box {
    position: relative;

    &::part(hover) {
        transform: rotateY(180deg);
    }

    & > * {
        grid-row: 1;
        grid-column: 1;
        overflow: hidden;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }

    & > *:first-child {
        z-index:2;
    }

    & > *:last-child {
        z-index:2;
        transform: rotateY(180deg);
    }

    &::part(root) {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    &::part(toggle) {
        position: absolute;
        top: 10px;
        right: 10px;
        font: var(--fa-font-solid);
        font-size: 1rem;
        background-color: white;
        color: #444;
        border: solid 1px darkgray;
        border-radius: 9999px;
        width: 20px;
        height: 20px;
        display: inline-grid;
        align-items: center;
        justify-content: center;
        justify-items: center;
        cursor: pointer;
        &::after {
            content: "\f2f1";
        }
        &:hover {
            color: blue;
        }
    }

    &::part(container) {
        display: inline-grid;
        perspective: 1000px;

        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        transition: 0.6s;
        transform-style: preserve-3d;
        width: 100%;
        height: 100%;
    }

    &[first-visible=yes],&[first-visible=true],&[first-visible=on] {
        & > *:first-child {
            backface-visibility: visible;
        }
    }

    & img {
        &:not([styler-object-fit]) {
            object-fit: contain;
        }

        @media (max-width: 700px) {
            &:not([styler-max-width]) {
                max-width: 100vw;
            }    
        }
    }
}

body:not([editing]) {

    & flip-box {

        &:hover {
            &::part(container) {
                transform: rotateY(180deg);
            }
        }

        &::part(toggle) {
            display: none;
        }
    }
}