.contentCanvas {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    padding: 82px var(--size-SidebarWidth) 0;
    transition: var(--transition-Default)  ease padding;
    will-change: padding;
    background-color: var(--colors-ContrastDarker);

    &::after {
        content: '';
        position: absolute;
    }
}

.contentCanvas--isFringeLeft {
    padding-left: 0;
}
.contentCanvas--isFringeRight {
    padding-right: 0;
}
.contentCanvas--isMovedDown {
    padding-top: 192px; /* height of EditModePanel added */
}
.contentCanvas--isFullScreen {
    padding: var(--spacing-GoldenUnit) 0 0 0;
}
.contentCanvas--isHidden {
    &::after {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: white;
    }
}
.contentCanvas__itemWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition-Default)  ease width, var(--transition-Default)  ease height;
}
.contentCanvas__contents {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
}
