/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.tile-page {
  display: -webkit-box;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-box-orient: vertical;
}

.tile-page-scrollbar {
  margin: 0 4px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 5px;
  z-index: 5;
  -webkit-box-sizing: border-box;
}

.tile-page-content {
  overflow-y: scroll;
  /* This value is mirrored in TilePage.updateTopMargin_ */
  padding-top: 60px;
  position: relative;
  text-align: center;
  width: 100%;
  /* TODO(estade): this mask is disabled for technical reasons. It negatively
   * impacts performance of page switching, also it causes problems with Mac
   * text: http://crbug.com/86955
  -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
  */
  /* The following four properties are necessary so that the mask won't clip
   * the scrollbar. */
  box-sizing: border-box;
  /* Scrollbar width(13px) + balance right padding.  */
  padding-left: 93px;
  padding-right: 80px;
  -webkit-box-flex: 1;
  /* Don't apply clip mask to padding. */
  -webkit-mask-clip: content-box;
}

.tile-grid {
  position: relative;
  width: 100%;
}

.tile {
  display: inline-block;
  position: absolute;
  -webkit-print-color-adjust: exact;
  /* Don't offer the context menu on long-press. */
  -webkit-touch-callout: none;
  -webkit-user-drag: element;
}

/* I don't know why this is necessary. -webkit-user-drag: element on .tile
 * should be enough. If we don't do this, we get 2 drag representations for
 * the image. */
.tile img {
  -webkit-user-drag: none;
}

.doppleganger {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

.tile.dragging {
  opacity: 0;
}

.tile.drag-representation {
  pointer-events: none;
  position: fixed;
  z-index: 3;
  -webkit-transition: opacity 200ms;
}

.tile.drag-representation.placing > * {
  -webkit-transition: -webkit-transform 200ms;
}

/* When a drag finishes while we're not showing the page where the tile
 * belongs, the tile shrinks to a dot. */
.tile.drag-representation.dropped-on-other-page > * {
   -webkit-transform: scale(0) rotate(0);
}

.tile.drag-representation.deleting > * {
  -webkit-transform: scale(0) rotate(360deg);
  -webkit-transition: -webkit-transform 600ms;
}

.animating-tile-page .tile,
.tile.drag-representation.placing {
  -webkit-transition: left 200ms, right 200ms, top 200ms;
}

.hovering-on-trash {
  opacity: 0.6;
}

.animating-tile-page .top-margin {
  -webkit-transition: margin-bottom 200ms;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0, 0);
  }

  60% {
    -webkit-transform: scale(1.2, 1.2);
  }

  100% {
    -webkit-transform: scale(1, 1);
  }
}

.tile > .new-tile-contents {
  -webkit-animation: bounce 500ms ease-in-out;
}

@-webkit-keyframes blipout {
  0% {
    -webkit-transform: scale(1, 1);
  }

  60% {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-transform: scale(1.3, 0.02);
  }

  90% {
    opacity: 0.7;
    -webkit-animation-timing-function: default;
    -webkit-transform: scale(0.3, 0.02);
  }

  100% {
    opacity: 0;
    -webkit-animation-timing-function: linear;
    -webkit-transform: scale(0.3, 0.02);
  }
}

.tile > .removing-tile-contents {
  pointer-events: none;
  -webkit-animation: blipout 300ms;
}

.tile-page:not(.selected-card) * {
  -webkit-transition: none !important;
}

/** Scrollbars ****************************************************************/

.tile-page-content::-webkit-scrollbar {
  width: 13px;
}

.tile-page-content::-webkit-scrollbar-button {
  display: none;
}