@import (reference) './IconButton.less';
@import (reference) './Button.less';
@import (reference) './Checkbox.less';
@import (reference) './Dropdown.less';
@import (reference) './Link.less';
@import (reference) './Text.less';

.cropper-drag-box,
.cropper-center::before,
.cropper-center::after,
.cropper-face,
.cropper-line,
.cropper-point,
.cropper-point.point-se::before {
  background-color: var(--color-white);
}

.cropper-modal {
  background-color: var(--color-black);
  opacity: 0.5;
}

.cropper-view-box {
  outline-color: var(--color-white);
}

.cropper-dashed {
  border-color: var(--color-white);
}

.cropper-dashed,
.cropper-center,
.cropper-point {
  opacity: 1;
}

@keyframes isAdded {
  from {
    background: var(--color-green4);
  }

  to {
    background: var(--color-white);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.ImageEditor-open,
.ImageEditor-editToggle {
  .IconButton;

  background: var(--color-white);
  display: none;
  position: absolute;
  top: 0;

  &::after {
    border-radius: 0%;
  }

  button& {
    background: var(--color-white);
  }

  .is-imageEditorLoaded & {
    display: block;
  }
}

.ImageEditor-open {
  --IconButton-name: 'brush';

  right: calc(var(--gap-s) * 2 + var(--Icon-size));

  &.noEditor {
    --IconButton-name: 'crop';
  }

  &:focus-visible {
    z-index: 1;
  }
}

.ImageEditor-editToggle {
  --IconButton-name: 'more_horiz';

  right: 0;

  &.is-active {
    --IconButton-name: 'close';

    color: var(--Link-hoverColor);
  }
}

.ImageEditor-editTools {
  .Dropdown;

  &.is-open {
    .Dropdown.is-open;

    [role='menuitem'] {
      .Dropdown-item;
      .Link.is-blue;
    }
  }
}

.is-imagePreview {
  background: var(--color-gray1);
  display: flex;
  min-height: 204px;
  min-width: 272px;
  position: relative;
  width: fit-content;
}

.ImageEditor-container {
  margin-top: var(--gap-s);
}

.ImageEditor-preview {
  cursor: pointer;
  display: flex;
  margin: auto;
  position: relative;
  width: fit-content;

  img,
  canvas {
    background-color: var(--color-gray1);
    background-image: linear-gradient(
        45deg,
        var(--color-gray3) 25%,
        transparent 25%,
        transparent 75%,
        var(--color-gray3) 75%,
        var(--color-gray3)
      ),
      linear-gradient(
        -45deg,
        var(--color-gray3) 25%,
        transparent 25%,
        transparent 75%,
        var(--color-gray2) 75%,
        var(--color-gray3)
      );
    background-size: 10px 10px;
    display: block;
    margin: auto;
    max-height: 60vh;
    max-width: 100%;
  }

  &.is-hidden {
    img {
      display: none;
    }
  }
}

.ImageEditor-preview-border {
  border-color: rgb(0 0 0 / 50%);
  border-style: solid;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.ImageEditor-preview-loader {
  display: none;
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;

  &::before {
    background: rgb(255 255 255 / 70%);
    bottom: -1px;
    content: '';
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
  }

  &::after {
    .Icon;

    animation: spin var(--time-xl) infinite ease-in-out;
    color: var(--color-black);
    content: 'autorenew';
    left: calc(50% - var(--Icon-size) / 2);
    position: absolute;
    top: calc(50% - var(--Icon-size) / 2);
  }
}

.ImageEditor {
  --ImageEditor-asideWidth: 428px;

  background: var(--color-white);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: var(--Page-headerBottom);
  transform: scaleY(0);
  transform-origin: bottom;
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out);
  z-index: 1000;

  .CIG & > .TabBar {
    margin-left: 0;
    margin-right: 0;
  }

  > [data-tab] {
    height: calc(100% - var(--gap-m) * 2 - var(--lineHeight-m));
  }

  .ActionBar {
    bottom: 0;
    justify-content: space-between;
    padding: var(--gap-l) var(--gap-xl);
    position: fixed;
    width: var(--ImageEditor-asideWidth);
  }
}

.ImageEditor-main {
  align-items: center;
  background-color: var(--color-gray2);
  bottom: 0;
  left: var(--ImageEditor-asideWidth);
  min-width: 420px;
  position: absolute;
  right: 0;
  top: 0;

  img {
    display: block;
    max-height: 100%;
    max-width: 100%;
  }
}

.ImageEditor-focus {
  color: var(--color-gray6);
  margin: var(--gap-l) 0;

  button {
    margin-bottom: var(--gap-m);
    width: 100%;

    --Icon-color: var(--color-dominant6);

    &:hover,
    &:focus {
      color: var(--color-dominant6);
    }

    &.is-active {
      border-color: var(--Link-hoverColor);
      color: var(--Link-hoverColor);

      --Icon-color: var(--Link-hoverColor);
    }

    &.is-disabled {
      border-color: var(--color-gray3);
      color: var(--color-gray3);
      pointer-events: none;

      --Icon-color: var(--color-gray3);
    }

    &::before {
      background: repeating-radial-gradient(
        var(--Icon-color),
        var(--Icon-color) 3px,
        var(--color-white) 3px,
        var(--color-white) 6px
      );
      border-radius: 50%;
      content: '';
      height: 24px;
      margin-right: var(--gap-s);
      width: 24px;
    }
  }
}

.ImageEditor-focus-container,
.ImageEditor-focus-modal,
.ImageEditor-hotspot-container,
.ImageEditor-editableArea {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  &.is-hidden {
    display: none;
  }
}

.ImageEditor-focus-modal {
  background: var(--color-black);
  opacity: 0.6;
}

.ImageEditor-focusLine-x {
  border-top: 2px dashed var(--color-white);
  left: 0;
  opacity: 0.64;
  position: absolute;
  width: 100%;
}

.ImageEditor-focusLine-y {
  border-left: 2px dashed var(--color-white);
  height: 100%;
  opacity: 0.64;
  position: absolute;
  top: 0;
}

.ImageEditor-focusableArea {
  border: 1px solid var(--Link-hoverColor);

  &:hover {
    cursor: crosshair;
  }
}

.ImageEditor-implicitMessage,
.ImageEditor-focusMessage {
  .Text.is-s;

  background: var(--color-gray7);
  bottom: var(--gap-s);
  color: var(--color-white);
  left: 50%;
  max-width: 95%;
  opacity: 1;
  padding: var(--gap-xs);
  position: absolute;
  right: auto;
  text-transform: lowercase;
  transform: translateX(-50%);
  width: fit-content;

  &::first-letter {
    text-transform: uppercase;
  }
}

.ImageEditor-implicitMessage {
  bottom: auto;
  top: var(--gap-s);
}

.ImageEditor-title {
  background: var(--color-gray1);
  font-weight: bold;
  padding: var(--gap-m) var(--gap-l);
  width: var(--ImageEditor-asideWidth);
}

.ImageEditor-aside {
  bottom: calc(var(--lineHeight-m) + var(--gap-s) * 2 + var(--gap-l) * 2);
  left: 0;
  margin-top: calc(var(--lineHeight-m) + var(--gap-m) * 2);
  overflow: auto;
  padding: 0 var(--gap-xl) var(--gap-l) var(--gap-xl);
  position: absolute;
  top: 0;
  width: var(--ImageEditor-asideWidth);

  .TC-unselected {
    display: none;
  }

  .TabBar {
    margin: 0 calc(var(--gap-xl) * -1);
  }
}

.ImageEditor-hotspotableArea {
  background: rgb(255 255 255 / 0%);
  position: relative;
}

.ImageEditor-hotspotableArea.is-dragging
  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
  opacity: 0.3;
}

// Hide the Transient hotspot region option since it isn't used.
.ImageEditor-hotspots {
  .ComboInput-option[data-value^='Transient'] {
    display: none;
  }
}

.ImageEditor-hotspots .hotSpots {
  max-width: calc(var(--ImageEditor-asideWidth) - 2 * var(--gap-l));
}

// Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays.
.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.x'],
.ImageEditor-hotspots .CIG-row[data-name$='/cms.image.y'] {
  display: none;
}

.ImageEditor-hotspot {
  --x: 0;
  --y: 0;
  --size: 36px;
  --Icon-size: calc(var(--size) - var(--size) / 2);

  align-items: center;
  background: var(--color-white);
  border-radius: 100%;
  box-shadow:
    0 0 0 2px var(--color-gray6),
    0 2px 3px 1px rgb(123 123 123 / 80%);
  color: var(--color-gray6);
  display: flex;
  height: var(--size);
  justify-content: center;
  opacity: 1;
  position: absolute;
  transition: opacity var(--time-l) ease;
  width: var(--size);
  z-index: var(--index);
}

.ImageEditor-hotspot.is-hidden {
  opacity: 0;
}

.ImageEditor-hotspot.is-hovered {
  background: var(--color-blue5);
}

.ImageEditor-hotspot.is-removing {
  background: var(--color-red1);
  box-shadow:
    0 0 0 2px var(--color-red6),
    0 2px 1px 1px rgb(123 123 123 / 80%);
  opacity: 0.8;
  pointer-events: none;
}

.ImageEditor-hotspot.is-added {
  animation: 500ms forwards isAdded ease-in-out;
}

.ImageEditor-hotspot.is-dragging {
  background: var(--color-green2);
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--color-green4),
    0 2px 1px 1px rgb(123 123 123 / 80%);
  color: var(--color-black);
  opacity: 0.75;
}

.ImageEditor-focus {
  > h2 {
    .Text.is-m;

    margin-bottom: var(--gap-m);
  }

  .ImageEditor-image {
    cursor: crosshair;
  }

  .ImageEditor-aside {
    align-items: center;
    display: flex;
    font-style: italic;
    justify-content: center;
    text-align: center;
  }
}

.ImageEditor-edit {
  > h2 {
    display: none;
  }

  > table {
    display: none;
  }

  .CIG-label:has(input[type='range']) {
    --Text-height: var(--lineHeight-m);

    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: calc(2 * var(--Text-height));

    input[type='range'] {
      width: 100%;
    }
  }
}

.ImageEditor-editGroup {
  input[type='checkbox'] {
    .Checkbox;

    color: var(--Link-color);
    margin-right: var(--gap-s);

    &::before {
      border-radius: 50%;
    }

    &:checked::after {
      content: 'circle';
    }
  }
}

.imageEditor-adjustment {
  label {
    display: block;
  }

  > ul > li > label {
    align-items: center;
    display: flex;
  }
}

.imageEditor-adjustment-icons {
  list-style-type: none;
  margin-left: 0;

  li {
    display: inline;
    margin-right: 0.5em;
  }
}

.ImageEditor-sizes {
  margin: 0 calc(0px - var(--gap-xl)) calc(0px - var(--gap-l))
    calc(0px - var(--gap-xl));

  > h2 {
    .Text.is-m;

    margin-bottom: var(--gap-m);
  }

  > table {
    display: none;
  }
}

.ImageEditor-groups {
  background: rgb(var(--rgb-white) / 90%);
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;

  > * {
    flex-basis: 100%;
  }

  > span {
    padding: var(--gap-s) 0;
    vertical-align: middle;
  }

  .ComboInput {
    padding-left: var(--gap-s);
  }
}

.ImageEditor-sizeSelectors {
  display: grid;
  grid-gap: var(--gap-s);
}

.ImageEditor-size {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--gap-m) var(--gap-xl);
  position: relative;

  &::after {
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--time-xs) var(--ease-out);
    width: var(--gap-m);
  }

  &.imageEditor-sizeSelected {
    .ImageEditor-sizePreview {
      --Icon-size: 20px;
      --Icon-margin: 5px;

      &::before {
        background: var(--Input-focusBackground);
        content: '';
        height: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
        position: absolute;
        top: 0;
        width: calc(var(--Icon-size) + calc(var(--Icon-margin) * 2));
      }

      &::after {
        .Icon;

        content: 'check';
        left: var(--Icon-margin);
        position: absolute;
        top: var(--Icon-margin);
      }

      canvas {
        box-shadow: var(--shadow-1);
      }
    }
  }

  &.ImageEditor-sizeModified {
    background: var(--color-yellow1);

    &::after {
      background: var(--color-yellow3);
      transform: none;
    }

    .ImageEditor-sizeDescription .is-inherit {
      display: none;
    }

    .ImageEditor-sizeDescription .is-override {
      display: block;
    }
  }
}

.ImageEditor-sizePreview {
  order: 1;
  width: 100%;

  canvas,
  img {
    background-color: var(--color-gray1);
    background-image: linear-gradient(
        45deg,
        var(--color-gray3) 25%,
        transparent 25%,
        transparent 75%,
        var(--color-gray3) 75%,
        var(--color-gray3)
      ),
      linear-gradient(
        -45deg,
        var(--color-gray3) 25%,
        transparent 25%,
        transparent 75%,
        var(--color-gray2) 75%,
        var(--color-gray3)
      );
    background-size: 10px 10px;
    display: block;
    max-height: 20vh;
    max-width: 100%;
  }
}

.ImageEditor-sizeContainer {
  align-items: center;
  display: flex;
  flex-grow: 1;
  margin-top: var(--gap-s);
  order: 2;
}

.ImageEditor-sizeLabel {
  align-items: center;
  text-transform: capitalize;

  br {
    display: none;
  }

  > * {
    &:not(:last-child)::after {
      content: ', ';
    }
  }
}

.ImageEditor-sizeDescription {
  .Text.is-s;

  color: var(--color-gray6);
  flex-basis: 100%;
  order: 2;
  text-transform: capitalize;

  .is-inherit {
    display: block;
  }

  .is-override {
    display: none;
  }
}

.ImageEditor-resetButton,
.ImageEditor-renditionResetButton {
  .Link;
  .Link.is-red;
  .Text.is-s;

  align-items: center;
  display: none;
  margin: var(--gap-s) 0 0 0;
  min-width: max-content;

  &::before {
    .Icon;
    .Icon.is-s;

    content: 'refresh';
    margin-right: var(--gap-xs);
  }
}

.ImageEditor-renditionResetButton.is-visible {
  display: block;
  line-height: var(--lineHeight-m);
  margin: 0 0 0 var(--gap-l);

  &::before {
    top: 50%;
  }
}

.ImageEditor-resetButton {
  display: block;
  margin: 0;
}

.is-imageEditorOpen {
  .ImageEditor {
    opacity: 1;
    transform: none;
  }
}

.is-imageEditorLoading {
  .ImageEditor-preview-loader {
    display: block;
  }
}

.ImageEditor-focusMessage.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.is-imageEditorReady {
  .ImageEditor-preview-loader {
    display: none;

    &::before,
    &::after {
      animation: none;
      background: none;
      content: '';
    }
  }
}

.ImageEditor-rotate-left,
.ImageEditor-rotate-right,
.ImageEditor-flip-h,
.ImageEditor-flip-v {
  .IconButton;

  float: left;
}

.ImageEditor-rotate-left {
  --IconButton-name: 'rotate_90_degrees_ccw';
}

.ImageEditor-rotate-right {
  --IconButton-name: 'rotate_90_degrees_ccw';

  transform: scaleX(-1);
}

.ImageEditor-flip-h {
  --IconButton-name: 'flip';
}

.ImageEditor-flip-v {
  --IconButton-name: 'flip';

  transform: rotate(90deg);
}

.ImageEditor-focus-point {
  background: repeating-radial-gradient(
    var(--color-black),
    var(--color-black) 3px,
    var(--color-white) 3px,
    var(--color-white) 6px
  );
  border-radius: 50%;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  position: absolute;
  width: 24px;

  &.is-hidden:not(.is-implicit) {
    display: none;
  }

  &.is-implicit {
    opacity: 0.4;
  }
}

.ImageEditor-implicitMessage.is-hidden {
  display: none;
}

// noUiSlider style overrides:

.is-slideable.noUi-target {
  border: none;
  box-shadow: none;
}

.is-slideable {
  --Thumb-diameter: 1.5em;
  --Thumb-color: var(--color-dominant6);
  --Thumb-hover-color: var(--Input-focusColor);
  --Track-color: var(--color-gray3);
  --Track-height: 4px;
}

.is-slideable.noUi-target {
  background: none;
  height: 20px;
}

.is-slideable.noUi-target::after {
  background: var(--Track-color);
  content: '';
  height: var(--Track-height);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.is-slideable.noUi-horizontal .noUi-handle {
  background: var(--Thumb-color);
  border: none;
  border-radius: 100%;
  box-shadow: none;
  height: var(--Thumb-diameter);
  left: calc(-1 * var(--Thumb-diameter) / 2);
  top: -2px;
  width: var(--Thumb-diameter);

  &::before,
  &::after {
    content: none;
  }

  &:hover {
    background: var(--Thumb-hover-color);
  }
}

html:not([dir='rtl']) .is-slideable.noUi-horizontal .noUi-handle {
  right: calc(-1 * var(--Thumb-diameter) / 2);
}
