.modal {
    @include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) {
        .o_attachment_preview {
            width: 300px;
        }
    }
}

@include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) {
    .o_attachment_preview {
        display: block;
        flex: 1 0 auto;
        overflow: hidden;
        width: $o-chatter-min-width;
        border-left: 1px solid map-get($grays, '400');

        > .o_attachment_preview_container {
            position: relative;
            width: 100%;
            height: 100%;
            .arrow {
                width: 5%;
                @include o-position-absolute(50%, 0);
                @include o-viewer-black-btn;
                transition: width 0.3s;
                padding-top: 30px;
                height: 75px;
                &:hover {
                    width: 7%;
                }
                &.o_move_previous {
                    left: 2px;
                    right: 0px;
                }
            }
            > iframe {
                width: 100%;
                height: 100%;
            }
            > .o_attachment_preview_img {
                position: absolute;
                overflow: auto;
                width: 100%;
                height: 100%;
                > img {
                    margin: auto;
                    box-shadow: 0px 0px 5px rgba(41, 41, 41, 0.43);
                }
            }
        }
    }
}

@include media-breakpoint-down(xxl, $o-extra-grid-breakpoints) {
    .o_attachment_preview {
        display: none;
    }
}
