/*
    Plugin Name: DICOM Viewer
    Plugin URI: https://redthread.studio/dicom_viewer
    Description: DICOM Viewer for Wordpress: allows to upload DICOM (*.dcm) files in the media library and add them to a post. The CornerstoneJS library is used for .dcm processing (<a href="https://github.com/cornerstonejs/cornerstone">CornerstoneJS</a>).
    Author: Red Thread Design
    Author URI: https://redthread.studio/
*/

@mixin calc($property, $expression) {
    #{$property}:-webkit-calc(#{$expression});
    #{$property}:expression(#{$expression});
    #{$property}:-moz-calc(#{$expression});
    #{$property}:-o-calc(#{$expression});
    #{$property}:calc(#{$expression});
}

@mixin box-sizing($sizing) {
    -webkit-box-sizing:$sizing;
    -moz-box-sizing:$sizing;
    -o-box-sizing:$sizing;
    box-sizing:$sizing;
}

@mixin cross($property, $expression) {
    -webkit-#{$property}: #{$expression};
    -moz-#{$property}:    #{$expression};
    -ms-#{$property}:     #{$expression};
    -o-#{$property}:      #{$expression};
    #{$property}:         #{$expression};
}

@mixin selectable($select:text, $event:all, $touch:auto) {
    -webkit-user-select:$select;
    -moz-user-select:$select;
    -ms-user-select:$select;
    user-select:$select;
    pointer-events:$event;
    -webkit-touch-action:$touch;
    -moz-touch-action:$touch;
    -ms-touch-action:$touch;
    touch-action:$touch;
}

.dcms {display:none}
.dicom_image_wrapper {position:relative;@include box-sizing(border-box);max-width:100%;@include calc('max-height', '100vw - 380px');color:white;background-color:black;overflow:hidden;
    .dicom_image_blender {top:0px;left:0px;bottom:0;right:0;background:url(../img/pr.svg) center no-repeat;position:absolute;z-index:1;
        .dicom_image_blender_progress {position:absolute;top:50%;left:50%;@include cross('transform', 'translateX(-50%) translateY(-50%)');text-shadow:1px -1px 0 #000}
        & ~ .dicom_image_nav {
            .dicom_image_nav_load {
                .dicom_image_nav_load_ind {@include cross('flex', '0 1 auto');}
            }
        }
    }
    .dicom_image_frame_no {z-index:1;position:relative;@include selectable(none, none);top:5px;left:5px;font-size:85%;}
    .dicom_image {position:absolute;top:0;left:0;right:20px;bottom:0;max-width:100%;max-height:100%;
        canvas {position:absolute;min-width:100%;min-height:100%;max-width:100%;max-height:100%;}
    }
    .dicom_image_nav {height:100%;background:url(../img/icons.svg#larr) center no-repeat;top:0px;right:0px;width:20px;height:100%;position:absolute;background-color:rgba(#fff, .1);
        .dicom_image_nav_point {position:absolute;top:auto;bottom:0;@include selectable(none, none);font-size:20px;
            &:after {content:'';position:absolute;bottom:100%;left:50%;@include cross('transform', 'translateX(50%) translateY(50%)');width:20px;height:20px;background:url(../img/icons.svg#larr) center no-repeat;background-size:cover;}
        }
        .dicom_image_nav_load {position:absolute;top:0;left:0;right:0;bottom:0;@include cross('flex-direction', 'column-reverse');-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;@include selectable(none, none);
            .dicom_image_nav_load_ind {width:100%;@include cross('flex', '1 1 auto');
                &[data-status="loading"] {opacity:.3}
                &[data-status="loaded"] {opacity:.15}
                &[data-status="failed"] {opacity:1}
            }

        }
    }
}