/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:root {
  /* This should map to --theme-toolbar-background. */
  --rdm-background-color: #f5f5f6;
  --rdm-shadow-color: rgba(155, 155, 155, 0.26);

  &[devtoolstheme="dark"] {
    --rdm-background-color: #18181a;
    --rdm-shadow-color: rgba(105, 105, 105, 0.26);
  }
}

.browserContainer.responsive-mode {
  background-color: var(--rdm-background-color);
  --rdm-toolbar-height: 30px;
  --rdm-toolbar-accomodate-ua-height: 60px;
}

.browserContainer.responsive-mode > .rdm-toolbar {
  border: none;
  position: absolute;
  z-index: var(--browser-stack-z-index-rdm-toolbar);
  height: var(--rdm-toolbar-height);
  top: 0;
  left: 0;
  width: 100%;

  /**
   * The .rdm-toolbar will be above the .dialogBox in RDM so we shift the
   * .dialogBox down by the height of the .rdm-toolbar so both are visible
   */
  + .browserStack > .dialogStack:not(.content-prompt-dialog) > .dialogTemplate > .dialogBox {
    margin-top: var(--rdm-toolbar-height);
  }
}

.browserContainer.responsive-mode > .rdm-toolbar.accomodate-ua {
  height: var(--rdm-toolbar-accomodate-ua-height);

  /**
   * When the browser window is less than 520 pixels wide, the RDM toolbar
   * needs extra space to accomdate for the UA input so the .rdm-toolbar is
   * set to a larger height of --rdm-toolbar-accomodate-ua-height. We also need
   * to shift the .dialogBox down by the same height so both are visible.
   */
  + .browserStack > .dialogStack > .dialogTemplate > .dialogBox {
    margin-top: var(--rdm-toolbar-accomodate-ua-height);
  }
}

.browserContainer.responsive-mode > .rdm-toolbar.device-modal-opened {
  height: 100%;
}

.browserContainer.responsive-mode > .browserStack {
  --resizer-offset: 4px;
  --browser-viewport-width: calc(var(--rdm-width) + var(--resizer-offset));
  --browser-viewport-height: calc(var(--rdm-height) + var(--resizer-offset));
  --rdm-zoomed-width: calc(var(--rdm-width) * var(--rdm-zoom));
  --rdm-zoomed-height: calc(var(--rdm-height) * var(--rdm-zoom));
  min-height: 0;
  min-width: 0;
  overflow: auto;
  contain: size;
  grid-template-columns: 15px 1fr [center-align] var(--browser-viewport-width) 1fr;
  grid-template-rows: 65px [margin-top-offset] var(--browser-viewport-height);
}

.browserContainer.responsive-mode > .browserStack > .rdm-dynamic-toolbar {
  align-self: end;
  background: lightslategray;
  opacity: 0.5;
}

.browserContainer.responsive-mode > .browserStack > :is(browser, .rdm-viewport-resize-handle, .rdm-dynamic-toolbar) {
  grid-column: center-align;
  grid-row: margin-top-offset;
}

.browserContainer.responsive-mode.left-aligned > .browserStack > :is(browser, .rdm-viewport-resize-handle) {
  grid-column: left-align;
}

.browserContainer.responsive-mode.left-aligned > .browserStack {
  grid-template-columns: 15px [left-align] var(--browser-viewport-width) 1fr;
}

html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
  grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px;
}

.browserContainer.responsive-mode > .browserStack > browser {
  border: 1px solid var(--devtools-splitter-color);
  box-shadow: 0 4px 4px 0 var(--rdm-shadow-color);

  transform-origin: 50% 0;
  transform: scale(var(--rdm-zoom), var(--rdm-zoom));
  box-sizing: content-box; /* This is important to ensure that the pane has the
                              precise number of pixels defined by --rdm-width
                              and --rdm-height. */
  height: var(--rdm-height);
  width: var(--rdm-width);
}

.browserContainer.responsive-mode.left-aligned > .browserStack > browser {
  transform-origin: 0 0;
}

/* Resize handles */

.browserContainer.responsive-mode > .browserStack > .viewport-resize-handle {
  width: 16px;
  height: 16px;
  background-image: url("./images/grippers.svg");
  margin-inline-end: var(--resizer-offset);
  margin-block-end: var(--resizer-offset);
  background-repeat: no-repeat;
  background-origin: content-box;
  cursor: nwse-resize;
  align-self: end;
  justify-self: right;
  position: relative;
  left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
  top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
}

.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-resize-handle {
  left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
}

.browserContainer.responsive-mode > .browserStack > .viewport-horizontal-resize-handle {
  width: 5px;
  height: calc(var(--rdm-zoomed-height) - 16px);
  cursor: ew-resize;
  justify-self: right;
  position: relative;
  left: calc((var(--rdm-zoomed-width) - var(--rdm-width)) / 2);
}

.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-horizontal-resize-handle {
  left: calc(var(--rdm-zoomed-width) - var(--rdm-width));
}

.browserContainer.responsive-mode > .browserStack > .viewport-vertical-resize-handle {
  width: calc(var(--rdm-zoomed-width) - 16px);
  height: 5px;
  cursor: ns-resize;
  align-self: end;
  position: relative;
  top: calc(var(--rdm-zoomed-height) - var(--rdm-height));
  left: calc((-1 * (var(--rdm-zoomed-width) - var(--rdm-width)) / 2));
}

.browserContainer.responsive-mode.left-aligned > .browserStack > .viewport-vertical-resize-handle {
  left: 0;
}