/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

.categories-panel {
  position: relative;
  /* TODO(sjmiles): why is this necessary? */
  overflow-x: hidden;
  background-color: #424242;
}

.category-toolbar {
  height: 100px;
  z-index: 1;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.category-toolbar::shadow #topBar {
  height: 96px;
}

.topeka-avatar {
  border-radius: 50%;
  overflow: hidden;
  height: 64px;
  width: 64px;
}


.category-bg-wrapper core-icon {
  height: 100%;
  width: 100%;
}

.category-list {
  display: block;
  position: absolute;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2px 0;
  margin: 0 -2px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-item {
  position: relative;
  float: left;
  vertical-align: top;
  width: 50%;
  height: 224px;
  /*
   * TODO(dfreedm): force items to be layers until
   * overflow scrolling renders correctly
   */
  will-change: transform;
}

.category-item[needZ] {
  z-index: 10000; /* need this for will-change */
}

.category-item.completed {
  pointer-events: none;
}

.tile {
  position: relative;
  margin: 2px;
}

.category-tile-bg {
  position: absolute !important;
}

.category-bg-wrapper {
  width: 80%;
  height: 80%;
}

.completed .category-bg-wrapper {
  width: 96px !important;
  height: 96px !important;
}

.cat-name {
  height: 48px;
  padding: 0 16px;
  font-size: 12px;
}

.leaderboard, .profile {
  color: #fff;
}

.leaderboard .theme-bg-a, .profile .theme-bg-a {
  background-color: #f5f5f5;
}

.leaderboard .cat-name, .profile .cat-name {
  background-color: #999;
}

.polymer-logo > .tile {
  background-color: #eee;
}

.polymer-logo core-icon {
  width: 100%;
  height: 100%;
}

/* wide layout */
.wide.category-list {
  padding: 4px 0;
  margin: 0 -4px;
  /* need to avoid transitioning elemnents causing scrollbars to appear */
  overflow-y: hidden;
}

.wide .category-item > .tile {
  margin: 4px;
}

.wide .category-item {
  width: calc(100% / 6);
  height: calc(100% / 3);
}

.wide .category-item:nth-of-type(1) {
  width: calc(100% / 3);
  height: calc(100% / 3 * 2);
}

.wide .category-item:nth-of-type(1) .category-bg-wrapper {
  width: 64%;
  height: 64%;
}

.wide .category-item:nth-of-type(4) {
  width: calc(100% / 3);
}

.wide .category-item:nth-of-type(4) .category-bg-wrapper {
  width: 100%;
  height: 100%;
}

.wide .category-item:nth-of-type(5) {
  width: calc(100% / 3);
  height: calc(100% / 3 * 2);
}

.wide .category-item:nth-of-type(9) {
  position: absolute;
  top: calc(100% / 3 * 2);
  left: 0;
  width: calc(100% / 6);
  height: calc(100% / 3 - 4px);
}

.wide .category-item:nth-of-type(10) {
  position: absolute;
  top: calc(100% / 3 * 2);
  left: calc(100% / 6);;
  width: calc(100% / 6);
  height: calc(100% / 3 - 4px);
}