/* 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/. */

@import "animations.less";
@import "variables.less";

// If updating update app/common/constants/styleValues.js as well and vice-versa
:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--default-font-family);
}

html,
#window {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;

  &.isFullScreen {
    .top, .downloadsBar, .hrefPreview {
      display: none;
    }
  }
}

#appContainer,
#windowContainer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.top {
  background: linear-gradient(to top, rgb(233, 233, 234) 0%, rgb(233, 233, 234) 29px, rgb(246,246,247) 100%);
  &.allowDragging {
    -webkit-app-region: drag;
  }
}

.mainContainer {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;
  z-index: 350; // on top of active tab but underneath preview tab
  position: relative;

  &:after {
    position: absolute;
    content: ' ';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    display: block;
    opacity: 0;
    transition: opacity .2s ease-in; // TODO: get from theme.tab
    pointer-events: none;
    will-change: opacity;
    z-index: 110;
  }
  &.hasFramePreview::after {
    transition-timing-function: ease-out; // TODO: get from theme.tab
    transition-duration: .1s; // TODO: get from theme.tab
    opacity: 1;
  }


}

.frameWrapper {
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

  // Needed to be able to click and drag to select content in pages.
  user-select: none;

  // Webviews can cause flickers w/ Chrome  v49 if left visible
  // in the background.  This also has a major benefit for background
  // tabs that have video and animations in them.
  visibility: hidden;
  // delay frames getting hidden when new tabs show up
  // in order to avoid showing 0 frames and just the window
  // background
  // whilst this does also affect visibility when switching tabs,
  // z-index ensures the delayed-hidden tab is not visible
  // Note that this value can be as large as we want, it does not
  // need to match the timeout specified in the frame's <Transition /> element
  // (in renderer main.js). However, there is no reason to set it higher than that.
  --visibility-delay: .15s;
  --frame-zIndex-delay: 0s;
  transition: visibility 0s linear var(--visibility-delay), z-index 0s linear var(--frame-zIndex-delay);
  // active frame z-index
  z-index: 100;

  .hasFramePreview &.isActive {
    // Move to below preview frame, but do so as part of 'preview' entry animation
    // so that it is clear which frame is being previewed and which is active.
    z-index: 93;
    --frame-zIndex-delay: .2s;
  }

  &:not(.isActive) {
    // non-active always lower than active
    z-index: 90;
  }
  &.isPreview {
    background: #222;
    z-index: 95;
  }
  // show frame when active or preview
  &.isActive,
  &.isPreview,
  // keep window contents around when exiting, to allow
  // time for next active frame to be shown
  &.isExiting {
    visibility: visible;
    // show instantly
    --visibility-delay: 0s;
  }
  // hide frame whilst it's figuring out which location to be
  // note: that isEntering is timed-out at a value set in renderer main.js
  // but isBlankLocation will change at the exact moment that the frame
  // has an actual location
  &.isEntering.isBlankLocation {
    visibility: hidden;
    // hide instantly (at first)
    --visibility-delay: 0s;
  }

  webview {
    background-color: var(--frame-bg);
    border: 0;
    height: 100%;
    outline: none;
    width: 100%;
  }

  .webviewContainer {
    height: 100%;
    width: 100%;
  }

}

.hrefPreview {
  background: @chromePrimary;
  border-color: @chromeSecondary;
  border-style: solid;
  border-width: 1px 1px 0 0;
  border-top-right-radius: @borderRadius;
  max-width: 40%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.2em 0.5em;
  overflow-x: hidden;
  color: @chromeText;
  font-size: @defaultFontSize;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 30;

  &.right {
    left: auto;
    right: 0;
    border-width: 1px 0 0 1px;
    border-top-left-radius: @borderRadius;
    border-top-right-radius: 0;
  }
}

[draggable] {
  user-select: none;
 }

.link {
  color: @linkColor;
  cursor: pointer;
  text-decoration: underline;
}

// In React we often want to have elements but without href, so force pointer cursor
a {
  cursor: pointer;
}

// TODO: Investigate if these are required
// See PR #10861, Issue #10877
body {
  background-color: #000;
}
#windowContainer {
  color: #000;
}
