/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --modal-avatar-edit-font-family: var(--default-font-family);
  --modal-avatar-edit-cropper-z-index: 100;
  --modal-avatar-edit-control-z-index: calc(
    var(--modal-avatar-edit-cropper-z-index) + 1
  );
  --modal-avatar-edit-cropper-overlay-color: color-mod(#333 alpha(70%));
  --modal-avatar-edit-cropper-overlay-border-color: #fff;
}

/* Styles */
.container {
  all: initial;
  width: 100%;
  font-family: var(--modal-avatar-edit-font-family);
}

.body {
  position: relative;
  z-index: var(--modal-avatar-edit-cropper-z-index);
  width: 100%;
  padding: 0;
}

.controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: calc(var(--modal-avatar-edit-cropper-z-index) + 1);
}

.footer {
  padding: 0;
}

.icon {
  color: #fff;
  opacity: 0.6;

  &:hover {
    opacity: 1;
  }
}

.rotateLeft {
  composes: icon;
  position: absolute;
  z-index: var(--modal-avatar-edit-control-z-index);
  top: 10px;
  right: 40px;
}

.rotateRight {
  composes: icon;
  position: absolute;
  z-index: var(--modal-avatar-edit-control-z-index);
  top: 10px;
  right: 10px;
}

.zoom {
  position: absolute;
  z-index: var(--modal-avatar-edit-control-z-index);
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 28px 60px;
}

.cropper {
  &:global(.croppie-container) {
    & :global(.cr-viewport) {
      border: 2px solid var(--modal-avatar-edit-cropper-overlay-border-color);
      box-shadow: 0 0 2000px 2000px
        var(--modal-avatar-edit-cropper-overlay-color);
    }
  }
}