[data-behaviour*='side'] { .ct-panel-inner { position: absolute; inset-block: 0px; height: calc(100% - var(--side-panel-offset, 0px) * 2); width: calc(100% - var(--side-panel-offset, 0px) * 2); max-width: var(--side-panel-width, 500px); margin: var(--side-panel-offset, 0px); box-shadow: var(--theme-box-shadow); border-radius: var(--side-panel-border-radius, 0px); transition: transform $transition-duration ease-in-out; } } [data-panel*='in'] [data-behaviour*='side'] { &.active .ct-panel-inner { transform: translate3d(0, 0, 0); } } [data-behaviour*='right-side'] .ct-panel-inner { align-self: flex-end; transform: translate3d(var(--theme-panel-reveal-right, 20%), 0, 0); } [data-behaviour*='left-side'] .ct-panel-inner { align-self: flex-start; transform: translate3d(var(--theme-panel-reveal-left, -20%), 0, 0); }