@import (reference) "@beanbag/ink/lib/ink.less";
@import (reference) "rb/css/defs.less";


/* TODO: Reuse the colors from diffviewer.less, once they're moved out. */
@orig-image-border-color: #FF7777;
@modified-image-border-color: #63C363;


.image-review-ui-diff-thumbnail {
    .orig-image {
      border: 1px @orig-image-border-color solid;
      display: inline-block;
    }

    .modified-image {
      border: 1px @modified-image-border-color solid;
      display: inline-block;
      margin-left: 5px;
    }
}

.image-review-ui {
  background: var(--rb-c-review-request-bg);
  border-radius: 0 0 @box-border-radius @box-border-radius;
  position: relative;

  .image-content {
    background:
      var(--if-dark, black)
      var(--if-light, white);
    overflow-x: auto;
    position: relative;

    /* Center the image within the box. */
    display: flex;
    justify-content: center;
    align-items: center;

    /*
     * We set a minimum height primarily so that we have room for the
     * zoom level menu, both in the file attachment review UI and in the
     * diff viewer. 15em is a good number for the resolutions we offer today.
     */
    min-height: 15em;
  }

  .review-ui-header {
    table {
      width: 100%;
    }
  }

  .review-ui-error {
    text-align: center;
    padding: 2em;
  }

  .review-ui-inline & {
    padding: 0;
  }

  .image-single-revision {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;

    .caption {
      grid-column: 2;
    }
  }

  img {
    display: block;
    margin: 0 auto;
    padding: 0;
  }

  .caption {
    text-align: center;
  }

  .image-diffs {
    padding: 2em;
    text-align: center;

    .image-slider {
      margin: 2em auto 0 auto;
      width: 200px;
    }

    .orig-image {
      border: 1px @orig-image-border-color solid;
    }

    .modified-image {
      border: 1px @modified-image-border-color solid;
    }

    .image-container {
      display: inline-block;
      float: none;
      margin: 2em;
    }

    .image-diff-difference {
      canvas {
        border: 1px #CCCCCC solid;
      }
    }

    .image-diff-two-up {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .image-diff-onion,
    .image-diff-split {
      .image-containers {
        margin: auto;
        position: relative;

        .orig-image, .modified-image {
          display: block;
          margin: 0;
          position: absolute;
        }
      }
    }
  }

  .image-diff-split-container-orig,
  .image-diff-split-container-modified {
    overflow: hidden;
    position: absolute;
  }

  .image-diff-split-container-orig {
    .orig-image {
      left: 0;
    }
  }

  .image-diff-split-container-modified {
    border-left: 1px solid #999999;
    right: 0;

    .modified-image {
      right: 0;
    }
  }

  .image-diff-modes {
    align-items: center;
    display: grid;

    &.-has-modes {
      grid-template-columns: 1fr repeat(4, min-content) 1fr;

      > li:first-child {
        grid-column: 2;
      }
    }
  }

  .selection {
    border: 1px var(--rb-p-flag-published-bg) solid;
    position: absolute;

    &.draft {
      border: 1px var(--rb-p-flag-draft-bg) solid;

      .selection-flag {
        background-color: var(--rb-p-flag-draft-bg);
        color: var(--rb-p-flag-draft-fg);
      }

      &.can-update-bound {
        .selection-flag {
          cursor: move;
        }
        .resize-icon {
          background-color: var(--rb-p-flag-draft-bg);
          bottom: 0;
          right: 0;
          position: absolute;
          height: 0.5em;
          width: 0.5em;
          cursor: se-resize;
        }
      }
    }
  }

  .selection-flag {
    background-color: var(--rb-p-flag-published-bg);
    color: var(--rb-p-flag-published-fg);
    cursor: pointer;
    height: 2em;
    left: 0px;
    line-height: 170%;
    text-align: center;
    top: 0px;
    width: 2em;
  }

  .selection-container {
    cursor: crosshair;
    position: absolute;
    margin: 0;
    z-index: @z-index-event-overlay;
  }

  .selection-rect {
    border: 1px #ff0000 dashed;
    position: absolute;
  }

  .image-resolution-menu,
  .image-resolution-menu-wrapper {
    justify-self: end;
  }

  .image-resolution-menu {
    #ink-ns-ui.base.customize-component(
      @name: ink-c-menu-label;
      @schema: #ink-ns-schema[@menu-label];
      @schema-rules: {
        @menu: {
          /* Overlap the right border of the review UI. */
          margin-right: -1px;

          /* Anchor the menu to the right. */
          right: 0;
        };
      };
    );
  }
}
