@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$c-image-editor-display__scale-control-color: $white-color !default;
$c-image-editor-display__scale-control-button-size: 30px !default;
$c-image-editor-display__rotation-icon-size: 18px !default;
$c-image-editor-display__overlay-z-index: 10 !default;

.c-image-editor-display {
    @include full-length-canvas;
    cursor: move;
}

    .c-image-editor-display__canvas {
        @include fill-parent;
    }

    .c-image-editor-display__loader {
        position: absolute;
        top: calc(50% - #{$spinner-size / 2});
        left: calc(50% - #{$spinner-size / 2});
    }

    .c-image-editor-display__floating-button-wrapper {
        transform-origin: left;
        position: absolute;
        top: 0;
        left: 0;
    }

    .c-image-editor-display__floating-button {
        background: $white-color;
        border-radius: 50%;
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .c-image-editor-display__floating-button--rotate {
            cursor: none;
            transform: translate(-50%, 100%);
        }

        .c-image-editor-display__floating-button--delete {
            transform: translate(-50%, 100%) rotate(180deg);
        }

        .c-image-editor-display__floating-button__icon {
            $c-image-editor-display__rotate-button__icon-size: 16px;
            width: $c-image-editor-display__rotate-button__icon-size;
            height: $c-image-editor-display__rotate-button__icon-size;
        }

    .c-image-editor-display__is-rotating-controls,
    .c-image-editor-display__is-scaling-controls {
        margin-top: 24px;
        color: $white-color;
        background-color: $black-color;
        display: inline-block;
        min-width: 50px;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
    }

    @mixin c-image-scale-control-corner(
        $cornerIndex
    ) {
        $isNorthWest: $cornerIndex % 2 == 0;
        @if $isNorthWest == true {
            cursor: nwse-resize;
        } @else {
            cursor: nesw-resize;
        }
        top: 0;
        left: 0;
    }

    @mixin c-image-scale-control-corner__icon(
        $cornerIndex
    ) {
        $rotationAmount: ($cornerIndex * 90deg);
        transform: rotate($rotationAmount) translate(6px, 6px);
    }

    .c-image-editor-display__scale-control-wrapper {
        position: absolute;
        width: $c-image-editor-display__scale-control-button-size;
        height: $c-image-editor-display__scale-control-button-size;
        transform: translate(-50%, -50%);
    }

    .c-image-editor-display__scale-control {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 6px;
    }

        .c-image-editor-display__scale-control--top-left {
            @include c-image-scale-control-corner(0);
        }
        .c-image-editor-display__scale-control--top-right {
            @include c-image-scale-control-corner(1);
        }
        .c-image-editor-display__scale-control--bottom-right {
            @include c-image-scale-control-corner(2);
        }
        .c-image-editor-display__scale-control--bottom-left {
            @include c-image-scale-control-corner(3);
        }

            .c-image-editor-display__scale-control__icon {
                width: 18px;
                height: 18px;
            }

                .c-image-editor-display__scale-control__icon--top-left {
                    @include c-image-scale-control-corner__icon(0);
                }
                .c-image-editor-display__scale-control__icon--top-right {
                    @include c-image-scale-control-corner__icon(1);
                }
                .c-image-editor-display__scale-control__icon--bottom-right {
                    @include c-image-scale-control-corner__icon(2);
                }
                .c-image-editor-display__scale-control__icon--bottom-left {
                    @include c-image-scale-control-corner__icon(3);
                }

    .c-image-editor__rotation-icon-wrapper {
        pointer-events: none;
        display: inline-block;
        $half-icon-size: $c-image-editor-display__rotation-icon-size / 2;
        margin-top: -$half-icon-size;
        margin-left: -$half-icon-size;
        position: absolute;
        top: 0;
        left: 0;
    }

    .c-image-editor__rotation-icon {
        display: block;
        transform: rotate(45deg);
        width: $c-image-editor-display__rotation-icon-size;
        height: $c-image-editor-display__rotation-icon-size;
    }

    .c-image-editor-display__is-rotating-overlay {
        @include fill-parent(fixed);
        z-index: $c-image-editor-display__overlay-z-index;
        cursor: none;
    }

    .c-image-editor-display__is-scaling-overlay {
        @include fill-parent(fixed);
        z-index: $c-image-editor-display__overlay-z-index;
    }

    .c-image-editor-display__is-scaling-northwest-to-southeast {
        cursor: nwse-resize;
    }
    .c-image-editor-display__is-scaling-northeast-to-southwest {
        cursor: nesw-resize;
    }