// include a tl-layer rootclass - as that holds the layer specific class
.bg__tl-layer {
    > .bg__tl-section {
        &.cropped {
            .bg__tl-section-edit {
                .left {
                    display: none;
                }
            }
        }

        .bg__tl-section-edit {
            width: 100%;
            height: 100%;

            &.active {
                outline: 3px solid $clSecondary;
            }

            &:hover {
                .left,
                .right {
                    opacity: 0.4;
                }
            }

            &.dragging {
                background-color: rgba($clSecondary, 0.3);
            }
            &.dragging-both,
            &.dragging-left {
                .left {
                    opacity: 1;
                }
            }

            &.dragging-both,
            &.dragging-right {
                .right {
                    opacity: 1;
                }
            }

            .left,
            .right {
                position: absolute;
                height: 100%;
                width: 12px;
                top: 0;
                max-width: 30%;
                background-color: $clSecondary;
                opacity: 0.1;
                transition: opacity 0.3s ease-out;

                &:hover {
                    opacity: 1;
                }

                &::before {
                    content: '';
                    background-image: $arrowRightWhite40Url;
                    background-size: 50%;
                    background-repeat: no-repeat;
                    background-position: center center;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
            }

            .left {
                left: 0;
                &::before {
                    transform: scaleX(-1);
                }
            }
            .right {
                right: 0;
            }
        }
    }
}