@import 'commons';

$m-crop-image-slider-height: 18px;
$m-crop-image-slider-width: 180px;
$m-crop-image-icon-size--s: 20px;
$m-crop-image-icon-size--l: 28px;

.m-crop-image {
    position: relative;

    &__cropper {
        min-height: 200px;
        margin-bottom: calc(#{$m-crop-image-slider-height} + (#{$m-space} * 2));

        @media (min-width: $m-mq-min-sm) {
            min-height: 240px;
        }

        .cr-viewport {
            box-shadow: 0 0 2000px 2000px rgba(#696969, 0.5);
        }

        &.croppie-container .cr-slider-wrap {
            position: absolute;
            height: $m-crop-image-slider-height;
            width: auto;
            margin: 0;
            bottom: calc((#{$m-crop-image-slider-height} + #{$m-space}) * -1);
            left: 50%;
            transform: translateX(-50%);
        }

        .cr-slider {
            width: 180px;
            padding: 0;
            margin: 0;
            height: $m-crop-image-slider-height;
        }
    }

    &__icon-small {
        position: absolute;
        bottom: calc(((#{$m-crop-image-slider-height} / 2) + #{$m-space} + (#{$m-crop-image-icon-size--s} / 2)) * -1);
        left: calc(50% - ((#{$m-crop-image-slider-width} / 2) + #{$m-space} + #{$m-crop-image-icon-size--s}));
    }

    &__icon-big {
        position: absolute;
        bottom: calc(((#{$m-crop-image-slider-height} / 2) + #{$m-space} + (#{$m-crop-image-icon-size--l} / 2)) * -1);
        right: calc(50% - ((#{$m-crop-image-slider-width} / 2) + #{$m-space} + #{$m-crop-image-icon-size--l}));
    }
}