.elements-bar {
    position: fixed;
    top: 50%;
    min-height: $elements-bar;

    @include inline-flex;
    @include flex-just(center);

    > li {
        padding: 0;
    }

    @include tablet-screen {

        min-height: unset;
        width: 100vh;
    }
        
    &.left {
        z-index: 4;
        transform-origin: left top;
        transform: rotate(-90deg) translate(-50%, 0);

        @include spacer(left);

        @include tablet-screen {

            // Color switcher

            .color-switcher {
                top: calc(100vw - #{$grid-spacer} * 2);
                right: calc(100vh - #{$grid-spacer} * 4.75);
                transform-origin: top left;
                transform: rotate(90deg) translate(-100%, -100%);
            }
        }
    }

    &.right {
        z-index: 3;
        transform-origin: right top;
        transform: rotate(-90deg) translate(50%, -100%);

        @include spacer(right);

        @include tablet-screen {

            // Color switcher

            .color-switcher {
                bottom: calc(#{$grid-spacer} * 2);
                right: calc(100vh - #{$grid-spacer} * 5);
                transform-origin: top left;
                transform: rotate(90deg) translate(0%, -100%);
            }
        }
    }
}