#previewMagnifier {
    position: relative;

    @containerSide: 380;
    @sliderSide: 190;
    @zoom: calc(~'@{containerSide}%' / @sliderSide * 100);
    @containerWidth: ~'@{containerSide}px';
    @sliderWidth: ~'@{sliderSide}px';

    > .img-container {
        position: relative;
        width: @containerWidth;
        height: @containerWidth;
        border: 1px solid #ddd;
        overflow: hidden;
        cursor: pointer;

        > .slider {
            position: absolute;
            left: 0;
            top: 0;
            width: @sliderWidth;
            height: @sliderWidth;
            background-color: #fafafa;
            border: 1px solid #ddd;
            opacity: 0.5;
            pointer-events: none;
            z-index: 1;
        }

        > #image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    > .show-model {
        position: absolute;
        left: @containerWidth;
        top: 0;
        width: @containerWidth;
        height: @containerWidth;
        background-color: white;
        border: 1px solid #ddd;
        border-left: none;
        overflow: hidden;

        > * {
            position: absolute;
            width: @zoom;
            height: @zoom;
            object-fit: contain;
        }
    }

    > .img-list {
        @imgSideWidth: 54px;

        display: flex;
        align-items: center;
        width: @containerWidth;
        height: @imgSideWidth;
        margin-top: 5px;

        > .prev,
        > .next {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 19px;
            height: 32px;
            background-color: #b2b2b2;
            color: white;
            cursor: pointer;
        }

        > ul {
            padding: 0;
            list-style: none;
            display: flex;
            width: 100%;
            height: 100%;
            overflow-x: auto;
            overflow-y: hidden;

            > li {
                width: @imgSideWidth;
                height: @imgSideWidth;
                margin: 0 4px;

                > * {
                    width: 100%;
                    height: 100%;
                    border: 2px solid transparent;
                    &.active {
                        border-color: red;
                    }
                }
            }
        }
    }
}