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

.most-visited {
  position: absolute;
}

.most-visited {
  display: -webkit-box;
  position: absolute;
  text-decoration: none;
  -webkit-box-orient: vertical;
}

.most-visited:focus {
  outline: none;
}

.edit-mode-border {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.fills-parent {
  bottom: 0;
  display: -webkit-box;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* filler mode: hide everything except the thumbnail --- leave a grey rectangle
 * in its place. */
.filler * {
  visibility: hidden;
}

.filler {
  pointer-events: none;
}

/* The point of edit-bar-wrapper is to clip the edit bar. Otherwise it can show
 * through from behind the thumbnail (some themes have a partially transparent
 * thumbnail border color). */
.edit-bar-wrapper {
  height: 23px;
  overflow: hidden;
  width: 100%;
}

/* The edit bar appears on hover. */
.edit-bar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-sizing: border-box;
  cursor: move;
  display: -webkit-box;
  font-size: 100%;
  height: 100%;
  line-height: 20px;
  padding: 3px;
  padding-bottom: 0;
  position: relative;
  top: 23px;
  width: 100%;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-transition: top .15s;
}

.most-visited:focus .edit-bar,
.most-visited:hover .edit-bar {
  top: 0;
}

.most-visited:hover .edit-bar {
  /* Delay the appearance of the edit bar on hover. */
  -webkit-transition-delay: .5s;
}

.edit-bar > * {
  display: block;
  position: relative;
}

.edit-bar > .spacer {
  -webkit-box-flex: 1;
}

.edit-bar > .pin,
.edit-bar > .remove {
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-image: no-repeat 50% 50%;
}

.edit-bar > .pin {
  background-image: url('../ntp/ntp_pin_off.png');
}

.edit-bar > .pin:hover {
  background-image: url('../ntp/ntp_pin_off_h.png');
}

.edit-bar > .pin:active {
  background-image: url('../ntp/ntp_pin_off_p.png');
}

.pinned .edit-bar > .pin {
  background-image: url('../ntp/ntp_pin_on.png');
}

.pinned .edit-bar > .pin:hover {
  background-image: url(../ntp/ntp_pin_on_h.png');
}

.pinned .edit-bar > .pin:active {
  background-image: url(../ntp/ntp_pin_on_p.png');
}

.edit-bar > .remove {
  background-image: url('../ntp/ntp_close.png');
}

.edit-bar > .remove:hover {
  background-image: url('../ntp/ntp_close_h.png');
}

.edit-bar > .remove:active {
  background-image: url('../ntp/ntp_close_p.png');
}

.most-visited .title {
  background: no-repeat 0 50%;
  background-size: 16px;
  bottom: 5px;
  display: block;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-margin-start: 5px;
  -webkit-padding-end: 0;
  -webkit-padding-start: 20px;
}

.thumbnail {
  background: no-repeat;
  /* The extra 2% hides the scrollbar in the screenshot. */
  background-size: 102%;
  border-radius: 5px;
}

.filler .thumbnail {
  /* TODO(estade): there seems to be a webkit bug where this border is not
   * always removed when it should be. Investigate. */
  border: 1px solid;
  visibility: visible;
}

.thumbnail-wrapper {
  border: 3px solid transparent;
  border-radius: 5px;
  box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
  display: block;
  position: relative;
  z-index: 5;
  -webkit-box-flex: 1;
  -webkit-transition: background-color .15s,
      border-top-left-radius 0, border-top-right-radius 0, box-shadow .15s;
  /* The border radiuses have 0 transition duration but .15s delay, meaning they
   * will snap into place after .15s. */
  -webkit-transition-delay: 0, .15s, .15s, 0;
}

.filler .thumbnail-wrapper {
  visibility: visible;
}

/* Filler tiles can't get focused, but focused tiles can become filler. */
.most-visited:focus:not(.filler) .thumbnail-wrapper,
.most-visited:hover .thumbnail-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
}

.most-visited:hover .thumbnail-wrapper {
  /* Make the corner radius transitions match the edit bar's slide. */
  -webkit-transition-delay: 0, .5s, .5s, 0;
}

.most-visited:focus .thumbnail-wrapper {
  /* In the focus case, the transition is not delayed. */
  -webkit-transition-delay: 0, 0, 0, 0;
}