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

#item {
  @apply(--layout-center);
  @apply(--layout-horizontal);
  color: rgb(80, 80, 80);
  cursor: pointer;
  font-size: 77.8%;
  height: 30px;
  position: relative;
}

#item:hover {
  background-color: rgb(237, 237, 237);
  color: rgb(20, 20, 20);
}

paper-ripple {
  /* Allowing the ripple to capture pointer events prevents a focus rectangle
   * for showing up for clicks, while still allowing it with tab-navigation.
   * This undoes a paper-ripple bugfix aimed at non-Chrome browsers.
   * TODO(tsergeant): Improve focus in viewer-bookmark so this can be removed
   * (https://crbug.com/5448190). */
  pointer-events: auto;
}

#title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#expand {
  --iron-icon-height: 16px;
  --iron-icon-width: 16px;
  --paper-icon-button-ink-color: var(--paper-grey-900);
  height: 28px;
  min-width: 28px;
  padding: 6px;
  transition: transform 150ms;
  width: 28px;
}

:host-context([dir=rtl]) #expand {
  transform: rotate(180deg);
}

:host([children-shown]) #expand {
  transform: rotate(90deg);
}