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

:host {
  /* technical */
  display: block;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* size */
  height: 64px;
  /* typography */
  font-size: 1.3em;
}

:host(.animate) {
  /* transition */
  transition: height 0.18s ease-in;
}

:host(.medium-tall) {
  height: 128px;
}

:host(.tall) {
  height: 192px;
}

.toolbar-tools {
  height: 64px;
  padding: 0 8px;
  pointer-events: none;
}

/* narrow layout */
:host(.narrow) {
  height: 56px;
}

:host(.narrow.medium-tall) {
  height: 112px;
}

:host(.narrow.tall) {
  height: 168px;
}

:host(.narrow) .toolbar-tools {
  height: 56px;
  padding: 0;
}

/* middle bar */
#middleBar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

:host(.tall, .medium-tall) #middleBar {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

/* bottom bar */
#bottomBar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/* shows bottom bar only when in normal height (!tall && !medium-tall) */
:host(.animate.no-overlap) > #topBar, 
:host(.animate.no-overlap) > #middleBar {
  transition: -webkit-transform 0.18s ease-in;
  transition: transform 0.18s ease-in;
}

:host(.no-overlap:not(.medium-tall):not(.tall)) > #topBar {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

:host(.no-overlap:not(.medium-tall):not(.tall)) > #middleBar {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

/* make elements (e.g. buttons) respond to mouse/touch events */
polyfill-next-selector { content: '.toolbar-tools > *'; }
::content > * {
  pointer-events: auto;
}

/* elements spacing */
polyfill-next-selector { content: '.toolbar-tools > *'; }
::content > * {
  margin: 0px 8px;
}

/* misc helpers */
polyfill-next-selector { content: '.toolbar-tools > .fit'; }
::content > .fit {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
}

polyfill-next-selector { content: ':host .indent'; }
::content > .indent {
  margin-left: 60px;
}