/* Copyright 2012 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* The shield that overlays the background. */
.overlay {
  -webkit-box-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  display: -webkit-box;
  left: 0;
  overflow: auto;
  padding: 20px;
  /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */
  perspective: 1px;
  position: fixed;
  right: 0;
  top: 0;
  transition: 200ms opacity;
}

/* Used to slide in the overlay. */
.overlay.transparent .page {
  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
  transform: scale(0.99) translateY(-20px);
}

/* The foreground dialog. */
.overlay .page {
  -webkit-border-radius: 3px;
  -webkit-box-orient: vertical;
  background: white;
  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
  color: #333;
  display: -webkit-box;
  min-width: 400px;
  padding: 0;
  position: relative;
  transition: 200ms transform;
  z-index: 0;
}

/* If the options page is loading don't do the transition. */
.loading .overlay,
.loading .overlay .page {
  transition-duration: 0ms !important;
}

/* keyframes used to pulse the overlay */
@keyframes pulse {
 0% {
   transform: scale(1);
 }
 40% {
   transform: scale(1.02);
  }
 60% {
   transform: scale(1.02);
  }
 100% {
   transform: scale(1);
 }
}

.overlay .page.pulse {
  animation-duration: 180ms;
  animation-iteration-count: 1;
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

.overlay .page > .close-button {
  background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
  background-position: center;
  background-repeat: no-repeat;
  height: 14px;
  position: absolute;
  right: 7px;
  top: 7px;
  width: 14px;
  z-index: 1;
}

html[dir='rtl'] .overlay .page > .close-button {
  left: 10px;
  right: auto;
}

.overlay .page > .close-button:hover {
  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
}

.overlay .page > .close-button:active {
  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
}

.overlay .page h1 {
  color: #333;
  /* 120% of the body's font-size of 84% is 16px. This will keep the relative
   * size between the body and these titles consistent. */
  font-size: 120%;
  /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
   * above the top of the page. Use padding instead to make sure that the
   * headers of these pages have the correct spacing, but this should not be
   * necessary. See http://crbug.com/119029. */
  margin: 0;
  padding: 14px 17px 14px;
  text-shadow: white 0 1px 2px;
  user-select: none;
}

.overlay .page .content-area {
  -webkit-box-flex: 1;
  overflow: auto;
  padding: 6px 17px 6px;
  position: relative;
}

.overlay .page .action-area {
  -webkit-box-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
  display: -webkit-box;
  padding: 14px 17px;
}

html[dir='rtl'] .overlay .page .action-area {
  left: 0;
}

.overlay .page .action-area-right {
  display: -webkit-box;
}

.overlay .page .button-strip {
  -webkit-box-orient: horizontal;
  display: -webkit-box;
}

.overlay .page .button-strip > :-webkit-any(button,
                                            input[type='button'],
                                            input[type='submit']) {
  display: block;
  margin-inline-start: 10px;
}

.overlay .page .button-strip > .default-button:not(:focus) {
  border-color: rgba(0, 0, 0, 0.5);
}

.overlay .page .spacer-div {
  -webkit-box-flex: 1;
}

/* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
 * overlay contains scrollable content. To resolve this, style the scrollbars on
 * OSX so they are always visible. See http://crbug.com/123010. */
<if expr="is_macosx or is_ios">
.overlay .page .content-area::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 11px;
}

.overlay .page .content-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  border-radius: 8px;
}

.overlay .page .content-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
</if>

.gray-bottom-bar {
  background-color: #f5f5f5;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  border-color: #e7e7e7;
  border-top-style: solid;
  border-width: 1px;
  color: #888;
  display: -webkit-box;
  padding: 14px 17px;
}

/* Prevent the page underneath the overlay from scrolling. */
.frozen {
  position: fixed;
}

#overlay-container-1 {
  z-index: 11;
}
#overlay-container-2 {
  z-index: 12;
}

.transparent {
  opacity: 0;
}