/* Copyright (c) 2012 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. */

/* Begin top bar */

#bookmarks_title_wrapper {
  border-bottom: 1px solid #d0d0d0;
  display: -webkit-box;
  font-size: 17px;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  white-space: nowrap;
}

.section-title {
  -webkit-box-flex: 1;
  -webkit-box-orient: horizontal;
  display: -webkit-box;
  overflow: hidden;
  position: absolute;
}

.section-title-mask {
  -webkit-box-flex: 1;
  overflow: hidden;
  position: relative;
}

.overflow-left-mask {
  background: -webkit-gradient(
    linear,
    left center,
    right center,
    from(rgba(50,50,50,0.3)),
    to(rgba(0,0,0,0))
  );
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 10px;
}

.overflow-right-mask {
  background: -webkit-gradient(
    linear,
    left center,
    right center,
    from(rgba(0,0,0,0)),
    to(rgba(50,50,50,0.2))
  );
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
}

.bookmark-separator {
  background-image: url(images/breadcrumb_mdpi.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 20px; /* this matches the background image size */
  height: 44px;
  width: 10px;
}

html[dir='rtl'] .bookmark-separator {
  -webkit-transform: scaleX(-1);
}

#bookmarks_title_wrapper .title-crumb {
  color: #555;
  margin: 0 10px;
}

#bookmarks_title_wrapper .title-crumb-active {
  font-weight: bold;
  margin-right: 0;
  padding-right: 10px;
}

/* Begin Bookmark Cell Items */

.favicon-cell {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  height: 105px;
  padding: 11px;
  text-align: center;
  vertical-align: top;
  width: 80px;
}

.favicon-cell-active {
  -webkit-tap-highlight-color: transparent;
  background: rgba(51, 181, 229, .4);
}

.favicon-box {
  -webkit-border-radius: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: -webkit-box;
  height: 64px; /* icon container size */
  margin: auto; /* horizontally center */
  position: relative;
  text-align: center;
  width: 64px; /* icon container size */
}

.favicon-box.folder {
  background-image: url(images/bookmark_folder_mdpi.png);
}

.favicon-cell .title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  height: 30px;
  line-height: 18px;
  overflow: hidden;
  padding-bottom: 8px;
  padding-top: 10px;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.favicon-icon {
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.favicon-icon.document {
  left: 0;
  position: absolute;
  top: 0;
}

.bookmark-border {
  background-image: url(images/bookmark_border_mdpi.png);
  background-size: 100%;
  height: 64px;
  left: 0;
  position: absolute;
  top: 0;
  width: 64px;
}

.favicon-box.document {
  /* a 'document' favicon looks like a little web page with the favicon
     in top left corner */
  background-image: url(images/bookmark_bg_mdpi.png);
  margin: auto; /* horizontally center */
  margin-bottom: 0;
  margin-top: 0;
}

.favicon-box.document .fold-container {
  position: absolute;
  right: 7px;
  top: 3px;
}

.favicon-box.document .fold {
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
  height: 12px;
  width: 12px;
}

.favicon-box.document .active-shade {
  /* Shade overlay for favicon's when pressed */
  background-color: #000;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.favicon-box.document .active-shade:active {
  opacity: 0.15;
}

.favicon-box.document .color-strip {
  /* the color strip is an overlay across the bottom of the icon */
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  bottom: 3px;
  height: 4px;
  left: 7px;
  position: absolute;
  width: 50px;
}

.favicon-box.document .favicon-icon {
  background-size: 16px 16px;
}

.favicon-icon.touch-icon {
  background-size: 100%;
  border-radius: 16px; /* remove any junk in the corners of the favicon */
  height: 57px; /* touch-icon size */
  margin: auto; /* horizontally center */
  margin-bottom: 4px;
  margin-top: 3px; /* (64 - 57) / 2 = 3.5 */
  width: 57px; /* touch-icon size */
}

@media screen and (-webkit-min-device-pixel-ratio: 1.32) {
  .favicon-box.document {
    background-image: url(images/bookmark_bg_tvdpi.png);
  }
  .bookmark-border {
    background-image: url(images/bookmark_border_tvdpi.png);
  }
  .favicon-box.folder {
    background-image: url(images/bookmark_folder_tvdpi.png);
  }
  .bookmark-separator {
    background-image: url(images/breadcrumb_tvdpi.png);
  }

  /* tweaked spacing, presumably because of rounding error */
  .favicon-box {
    width: 65px;
  }
  .favicon-box.document .fold-container {
    right: 8px;
  }
  .favicon-box.document .color-strip {
    left: 8px;
    width: 48px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .favicon-box.document {
    background-image: url(images/bookmark_bg_hdpi.png);
  }
  .bookmark-border {
    background-image: url(images/bookmark_border_hdpi.png);
  }
  .favicon-box.folder {
    background-image: url(images/bookmark_folder_hdpi.png);
  }
  .bookmark-separator {
    background-image: url(images/breadcrumb_hdpi.png);
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
  .favicon-box.document {
    background-image: url(images/bookmark_bg_xhdpi.png);
  }
  .bookmark-border {
    background-image: url(images/bookmark_border_xhdpi.png);
  }
  .favicon-box.folder {
    background-image: url(images/bookmark_folder_xhdpi.png);
  }
  .bookmark-separator {
    background-image: url(images/breadcrumb_xhdpi.png);
  }
}