/**
 * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS-IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Required styles for the img */
.crop {
  position: relative;
  overflow: hidden;
}

.crop img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

/* Selection styles */
.drop {
  display: inline-block;
  min-height: 100px;
  padding: 16px;
  border: 1px solid #999;
  background-color: #eee;
}

[drag-over] .src-img-container {
  visibility: hidden;
}

.src-img-container {
  position: relative;
  display: inline-block;
  user-select: none;
}

.src-img-container > img {
  max-width: 100%;
  max-height: 40vh;
}

.dragger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 6px;
  margin: -6px;
}

.dragger::after {
  position: relative;
  top: -2px;
  left: -2px;
  content: '';
  display: block;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-width: 1px;
  border-style: solid;
  background-color: rgb(19, 255, 235);
  border-radius: 50%;
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
}

.selection-container {
  mix-blend-mode: darken;
  pointer-events: none;
}

.selection-rect {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-width: 1px;
  background-color: white;
  box-shadow: 0 0 6px 5px rgba(0, 0, 0, 0.05);
  mix-blend-mode: lighten;
}

.selection-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Output styles */
#selectedWidth:checked ~ .renderedWidth {
  display: none;
}

.html-markup,
.amp-markup {
  display: none;
}

#plainHtml:checked ~ .html-markup,
#ampHtml:checked ~ .amp-markup  {
  display: block
}

/* Page theming */
body {
  margin: 0;
  padding: 8px;
}

.section {
  margin-bottom: 16px;
}

.config {
  display: block;
}

.config > input {
  display: block;
}

.markup > code {
  display: block;
}

.markup > code > pre {
  display: inline-block;
  background-color: #eee;
  color: #222;
  padding: 8px;
}