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

%filter substitution
%include defines.inc

flyoutpanel {
  height: 100%;
  background-color: #ffffff;
  visibility: collapse;
  position: fixed;
  transition: transform @metro_animation_duration@ @metro_animation_easing@;
  transform: translateX(100%);
  font-size: 11pt;
  right: 0;
}

flyoutpanel:-moz-dir(rtl) {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}

.flyoutpanel-slide-in {
  transform: translateX(0);
}

flyoutpanel[visible] {
  visibility: visible;
}

/* XUL flexbox layout doesn't work in a position:fixed container, so we have
 * this normally-positioned inside for layout purposes. */
.flyoutpanel-wrapper {
  height: 100%;
  width: 100%;
}

.flyoutpanel-header {
  border-width: 1px;
  -moz-border-start-style: solid;
  border-color: #1b1b1b;
  background-color: #002147;
  height: 80px;
  width: 100%;
  color: #ffffff;
  font-weight: lighter;
  font-size: 20pt;
}

.flyout-close-button {
  margin-top: 30px !important;
  -moz-margin-start: 40px !important;
}

.flyout-header-label {
  margin-top: 30px !important;
  -moz-margin-start: 10px !important;
}

.flyoutpanel-contents {
  border-width: 1px;
  -moz-border-start-style: solid;
  border-color: #c2c2c2;
  padding: @metro_spacing_large@;
  width: 100%;
}

.flyoutpanel-contents[input="precise"] {
  overflow-y: scroll;
  overflow-x: hidden;
}

.flyout-close-button {
  border: 0 none;
  -moz-appearance: none;
  list-style-image: url(chrome://browser/skin/images/flyout-back-button.png);
  -moz-image-region: rect(0 32px 32px 0);
}

.flyout-close-button:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.flyout-close-button:hover {
  -moz-image-region: rect(0 64px 32px 32px);
}

.flyout-close-button:active {
  -moz-image-region: rect(0 96px 32px 64px);
}