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

@keyframes profileViewerFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes profileViewerFadeInSanitized {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
  }
}

@keyframes profileViewerFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

.profileViewerWrapper {
  display: flex;
  min-width: 0;
  flex: 1;
}

.profileViewerWrapperBackground {
  background-color: var(--grey-40);
}

.profileViewer {
  display: flex;
  min-width: 0; /* This allows Flexible Layout to shrink this further than its min-content */
  flex: 1;
  flex-flow: column nowrap;
  animation-duration: 200ms;
  animation-name: profileViewerFadeIn;
  background-color: #fff;
}

.profileViewerFadeOut {
  /* Keep this duration in sync with the value in hideStaleProfile() */
  animation-duration: 300ms;
  animation-name: profileViewerFadeOut;
  opacity: 0;
  pointer-events: none;
}

.profileViewerFadeInSanitized {
  animation-duration: 500ms;
  animation-name: profileViewerFadeInSanitized;
}

.profileViewerZipButton {
  /* Position */
  width: 18px;
  height: 18px;

  /* Box */
  flex: none;
  padding: 0;
  border: 1px solid var(--green-60);
  border-radius: 3px;
  margin: 3px 0 3px 3px;

  /* Other */
  background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
    center no-repeat;
  color: #000;
}

.profileViewerZipButton:hover {
  border-color: #000;
}

.profileViewerSplitter {
  /* Create a stacking context, so that the KeyboardShortcut can overlay the profile
     viewer. In addition, the built-in class uses position: absolute, which is not
     appropriate here. */
  position: relative;
  z-index: 0;
}

.profileViewerSplitter > .layout-pane:not(.layout-pane-primary) {
  display: flex;
  overflow: hidden;
  max-height: var(--profile-viewer-splitter-max-height);
  flex-direction: column;
}

.profileViewerTopBar {
  display: flex;
  height: 24px;
  flex: none;
  flex-flow: row nowrap;
  padding: 0;
  border-bottom: 1px solid var(--grey-30);
  margin: 0;
  background: var(--grey-10);
}

.profileViewerSpacer {
  flex: 1;
}

/* Do no animate the whole profile viewer during loading and publishing if user
 * prefers reduced motion. */
@media (prefers-reduced-motion) {
  .profileViewer,
  .profileViewerFadeOut,
  .profileViewerFadeInSanitized {
    animation: none;
  }
}
