@import (reference) "../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: white;
  border-radius: 0 0 @box-border-radius @box-border-radius;
  position: relative;

  .image-content {
    overflow-x: auto;
    position: relative;
  }

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

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

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

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

  .caption {
    margin-bottom: 1em;
    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: 0 2em;
    }

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

    .image-diff-two-up {
      img {
        display: inline-block;
      }

      .image-container-orig {
        right: 50%;
      }

      .image-container-modified {
        left: 50%;
      }
    }

    .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 {
    background: darken(#f0f0f0, 3%);
    border-bottom: 1px darken(#f0f0f0, 18%) solid;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;

    > li {
      display: inline-block;
      text-align: center;
      white-space: nowrap;

      &.selected {
        a {
          font-weight: bold;
          color: #333;
        }
      }

      > a {
        color: #444;
        display: block;
        margin: 1em;
      }
    }
  }

  .selection {
    border: 1px #a1c0e3 solid;
    position: absolute;

    &.draft {
      border: 1px #aceb6f solid;

      .selection-flag {
        background: #aceb6f;
      }

      &.can-update-bound {
        .selection-flag {
          cursor: move;
        }
        .resize-icon {
          background-color: #aceb6f;
          bottom: 0;
          right: 0;
          position: absolute;
          height: 0.5em;
          width: 0.5em;
          cursor: se-resize;
        }
      }
    }
  }

  .selection-flag {
    background-color: #a1c0e3;
    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 {
  @menu-width: 8em;

  float: right;
  margin-left: -@menu-width;
  min-width: @menu-width;
  text-align: left;

  .on-mobile-medium-screen-720({
    float: none;
    margin-left: 0;
  });

  .menu-header {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: @menu-width;
  }

  .menu {
    border-radius: 0 0 @box-border-radius @box-border-radius;
    box-shadow: @box-shadow;
    box-sizing: border-box;
    min-width: @menu-width;
    text-align: left;
  }

  .menu-item {
    cursor: pointer;
    color: #444;
    padding: 8px 10px;

    &:last-child {
      border-radius: 0 0 @box-border-radius @box-border-radius;
    }
  }
}

// Version of the menu when there's a diff
.image-diff-modes .image-resolution-menu {
  .menu-header {
    margin: 1em 0;
  }

  .menu {
    background: darken(#f0f0f0, 3%);
    border: 1px darken(#f0f0f0, 18%) solid;
  }

  .menu-item:hover {
    background-color: darken(#f0f0f0, 10%);
  }
}

// Version of the menu when there's a single revision
.image-single-revision {
  text-align: center;

  .caption,
  .image-resolution-menu {
    display: inline-block;
  }

  .image-resolution-menu {
    padding: 8px 0;

    .menu {
      border: 1px @diff-file-border-color solid;
      background: @review-ui-header-bg;
      margin: 8px 0 0 0;
    }

    .menu-header {
      color: #444;
      line-height: 16px;
    }

    .menu-item:hover {
      background-color: darken(@review-ui-header-bg, 10%);
    }
  }
}
