@import (reference) url('./Dropdown.less');

@dashedBoxDefault: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#CCC' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
@dashedBoxHover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
@dashedBoxSelected: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='4' stroke-linecap='square'/%3e%3c/svg%3e");
@dashedLineDefault: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='#6e6f76' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");
@dashedLineHover: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='black' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");

.Upscale() {
  --scaleFactor: ~'calc(1 + (1 - var(--PreviewScale, 1)))';

  transform: ~'translate(0px, 0px) scale(var(--scaleFactor)) !important';
}

body.overlay-hidden .Preview-overlay {
  visibility: hidden;
}

.is-previewToEditDisabled .Preview-overlayFrame {
  display: none;
}

.Preview-overlay {
  background-image: @dashedBoxDefault;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  opacity: 0;
  position: absolute;

  &.is-visible,
  &.is-selected,
  &.is-hover {
    opacity: 1;
  }

  &.is-removed {
    pointer-events: none;
    visibility: hidden;
  }

  &.is-loading {
    background: rgb(0 0 0 / 25%);
    pointer-events: none;

    &::after {
      &:extend(.Icon);

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

.Preview-moveUp,
.Preview-moveDown {
  &:extend(.Icon);

  font-size: var(--iconSize-xs);
}

.Preview-overlay.is-shared {
  background: transparent;
  outline: 4px dashed var(--color-blue4);
}

.Preview-overlay.is-locked {
  background: var(--color-gray2);
  opacity: 0.4;
  pointer-events: none;
}

div.Preview-overlayLabel {
  .Text.is-m;

  align-items: center;
  background: white;
  color: var(--color-gray4);
  display: inline-flex;
  flex-direction: row;
  font-family: var(--fontFamily-sansSerif);
  opacity: 0;
  padding: 0.25em 0.5em;
  position: absolute;
  text-transform: capitalize;
  transform: ~'translate(0px, 0px) scale(var(--PreviewScale))';
  transform-origin: top left;
  width: max-content;
  z-index: 1;
}

html.should-upscale div.Preview-overlayLabel {
  .Upscale();
}

.Preview-imageOverlay {
  &:is(.is-visible, :hover, :focus-visible, :active) > .Preview-overlayTooltip {
    opacity: 1;
    transition-delay: 150ms;

    --tooltip-y: -1px;
  }
}

.Preview-overlayTooltip {
  --tooltip-scale: ~'calc(1 + (1 - var(--PreviewScale, 1)))';
  --tooltip-tail-size: calc(7px * var(--tooltip-scale));
  --tooltip-tail-bottom: conic-gradient(
      from -30deg at bottom,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    bottom / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
  --tooltip-tail-top: conic-gradient(
      from 150deg at top,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    top / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
  --tooltip-bg: var(--color-white);
  --tooltip-shape: var(--tooltip-tail-top);
  --tooltip-y: calc(3px * var(--tooltip-scale));

  background: var(--tooltip-bg);
  display: grid;
  filter: drop-shadow(0 3px 3px hsl(0deg 0% 0% / 23%))
    drop-shadow(0 5px 5px hsl(0deg 0% 0% / 23%));
  font-size: 1rem;
  font-weight: normal;
  gap: var(--gap-s);
  inline-size: max-content;
  inset-block-end: calc(100% + calc(0.75ch * var(--tooltip-scale)));
  inset-inline-start: 0%;
  line-height: initial;
  margin: 0;
  max-inline-size: 25ch;
  min-width: fit-content;
  opacity: 0;
  padding: 0.75ch 1.5ch;
  pointer-events: none;
  position: absolute;
  scale: var(--tooltip-scale);
  text-align: start;
  transform: translateX(calc(-1px * var(--tooltip-scale)))
    translateY(var(--tooltip-y, 0));
  transform-origin: left;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  user-select: none;
  will-change: filter;
  z-index: 1;

  &::after {
    background: var(--tooltip-bg);
    border-block-end: var(--tooltip-tail-size) solid transparent;
    content: '';
    inset: 0 0 0 calc(-100% + calc(var(--tooltip-tail-size) * 4)); /* move the tail to the right */
    -webkit-mask: var(--tooltip-shape);
    mask: var(--tooltip-shape);
    position: absolute;
    z-index: -1;
  }

  &:is([position='top']) {
    --tooltip-shape: var(--tooltip-tail-bottom);

    &::after {
      border-block-end: var(--tooltip-tail-size) solid transparent;
      inset-block-end: calc(var(--tooltip-tail-size) * -1);
    }
  }

  &:is([position='bottom']) {
    --tooltip-shape: var(--tooltip-tail-top);

    inset-block-end: auto;
    inset-block-start: calc(100% + var(--tooltip-tail-size));

    &::after {
      border-block-start: var(--tooltip-tail-size) solid transparent;
      inset-block-start: calc(var(--tooltip-tail-size) * -1);
    }
  }

  &.is-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
    text-wrap: nowrap;

    :nth-child(odd) {
      justify-self: start;
      text-transform: capitalize;
    }

    :nth-child(even) {
      justify-self: end;
    }

    :nth-child(even):first-of-type {
      color: var(--color-gray5);
    }

    :nth-child(odd):not(:first-child) {
      color: var(--color-gray5);
    }
  }
}

.Preview-overlayTooltip b {
  color: var(--color-dominant5);
  font-weight: bold;
}

.Preview-overlay.is-hover:not(.is-locked),
.Preview-overlay.is-selected:not(.is-locked),
.Preview-overlay.is-menuOpen {
  pointer-events: auto;

  > .Preview-overlayLabel {
    opacity: 1;
    z-index: 2;
  }
}

.Preview-overlay.is-hover:not(.is-locked) {
  background-image: @dashedBoxHover;

  > .Preview-overlayLabel {
    color: var(--color-dominant5);
  }
}

.Preview-overlay.is-selected:not(.is-locked) {
  background-image: @dashedBoxSelected;
}

.Preview-overlay.is-selected:not(.is-locked) {
  > .Preview-overlay-addButton {
    opacity: 1;
  }

  > .Preview-overlayLabel {
    background: var(--color-gray2);
    color: var(--color-black);
  }
}

.Preview-overlay-editButton {
  .IconButton;

  --IconButton-name: 'edit';

  align-self: flex-end;
  position: absolute;
  right: calc(0px - var(--Icon-size) - var(--gap-l));
  top: 0;
  z-index: 2;
}

.Preview-overlay.is-hover.is-shared:not(.is-locked),
.Preview-overlay.is-selected.is-shared:not(.is-locked) {
  background: rgb(76 104 145 / 12%);
  outline: 2px solid var(--color-blue6);
}

.Preview-overlay.is-empty {
  align-items: center;
  background-image: @dashedLineDefault;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: none;
  flex-direction: row;
  justify-content: center;
  left: var(--offsetH);
  padding: calc(var(--gap-m) / 2) 100px;
  width: calc(100% - calc(2 * var(--offsetH)));
  z-index: 1;

  --offsetH: 6px;

  &.is-hover,
  &.is-selected {
    background-image: @dashedLineHover;
  }

  span.Preview-overlayLabel {
    .Text.is-xl;

    background: var(--color-white);
    padding: 0 var(--gap-l);
  }
}

.Preview-overlay.is-empty:hover {
  color: var(--color-blue6);
}

.is-previewEditorEnabled .Preview-overlay.is-empty {
  display: flex;
}

.Preview-overlay-addButton {
  .IconButton.no-Fill;
  .Link;

  --Button-size: calc(var(--gap-l) * 2 + var(--Text-height));
  --IconButton-name: 'add';
  --Icon-size: var(--iconSize-l);

  bottom: calc(0px - var(--Button-size) / 2);
  font-size: var(--Icon-size);
  left: calc(50% - var(--Button-size) / 2);
  opacity: 0;
  position: absolute;
  z-index: 2;

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

.ContentEdit-previewModal {
  background: var(--color-black);
  display: none;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2001;

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

.Preview-fieldActions {
  align-items: center;
  display: flex;
  margin-top: var(--gap-s);

  > * {
    margin-right: var(--gap-m);
  }

  > .is-cancel {
    color: var(--color-red6);
    cursor: pointer;
  }
}

// Content form fields styling
.is-previewEditing {
  background: white;
  box-shadow: var(--shadow-4);
  max-height: calc(85% - var(--gap-xl));
  padding: 0 var(--gap-xl);
  position: fixed;
  top: 15%;
  z-index: 2002 !important;

  &::after {
    display: none;
  }

  > button.is-save {
    margin-left: auto;
    position: relative;
    width: fit-content;
  }

  > .CIG-row {
    padding-top: 0;

    &::after {
      top: calc(var(--gap-l) + var(--gap-xl));
    }
  }

  > .RCIG-item,
  > .EIG-item,
  > .RCS-item {
    border: none;
    list-style: none;

    &::before {
      display: none;
    }

    > .CIG {
      padding-left: 0;
      padding-right: 0;
    }

    > .removeButton,
    > .RCIG-swap,
    > .EIG-swap,
    > .MultiSortable-buttonToggle,
    > .ContentSelector-clear {
      display: none;
    }
  }

  > .RCS-item {
    margin-top: var(--gap-xl);
  }

  .Preview-popupCancel {
    .IconButton;

    --IconButton-name: 'close';

    position: fixed;
    right: calc(30vw + var(--gap-l) - var(--gap-s));
    top: calc(
      15% + var(--gap-m) + var(--lineHeight-m) / 2 - var(--Icon-size) / 2 -
        var(--gap-s)
    );
    z-index: 10;
  }
}

.is-previewEditing {
  > .CIG-row > .CIG-label,
  > .RCIG-item > .repeatableLabel,
  > .EIG-item > .repeatableLabel,
  > .Preview-popupHeading {
    .Text.is-m;

    background: var(--color-gray2);
    color: black !important;
    height: auto;
    margin: 0 calc(0px - var(--gap-xl));
    padding: var(--gap-m) var(--gap-l);
    position: sticky;
    top: 0;
    z-index: 10;

    > .CIG-help,
    .CIG-guide,
    .CIG-comments {
      display: none;
    }
  }

  > .CIG-row > .CIG-label {
    margin-bottom: var(--gap-l);
  }

  > .RCIG-item:not(.is-gridItem) > .RCIG-title,
  > .EIG-item > .EIG-title {
    &::before,
    &:hover::before {
      display: none;
    }
  }
}

.is-previewEditing > .ActionBar {
  margin: 0 calc(0px - var(--gap-xl));
  margin-top: var(--gap-l);
}

.EIG-item.is-previewEditing > .removeButton {
  right: 0;
}

.EIG-item.is-previewEditing > .EIG-swap {
  right: calc(var(--gap-s) * 3 + var(--Icon-size));
}

.is-preview-menu {
  .is-previewEditing {
    left: 25vw;
    overflow: auto;
    right: 30vw;
  }
}

.Preview-overlayFrame {
  color-scheme: light;
}
