$toolbar-height = 60px

.che-toolbar
  font-size 1.6em
  flex-shrink 0
  border-bottom 1px solid $list-separator-color

.che-toolbar[border-none]
  border none

.che-toolbar a
  text-decoration none

.che-toolbar a:hover span
  text-decoration none

.che-toolbar a,
.che-toolbar md-icon,
.che-toolbar .che-toolbar-subheader,
.che-toolbar .che-toolbar-title-label
  color $default-dark-color !important

.che-toolbar md-toolbar
  min-height $toolbar-height

.che-toolbar-breadcrumb
  margin-left 10px

.che-toolbar-breadcrumb a
  text-decoration none

.che-toolbar-breadcrumb a:hover > span
  text-decoration underline

.che-toolbar-header
  flex-wrap wrap
  margin 0 15px

  & > div:last-child
    position absolute
    right 15px
    bottom 5px

.che-toolbar-title
  white-space nowrap
  text-transform none

.che-toolbar-title-icons
  margin-left 10px

.che-toolbar-title-icons md-icon
  font-size 32px
  height 34px
  width 34px
  margin-right 10px

.che-toolbar-control-button
  min-width 40px
  text-align center
  padding 0 10px
  border 1px solid transparent

.che-toolbar-control-button:hover md-icon, .che-toolbar-control-button:hover
  color $primary-color !important

.che-toolbar-add-button
  cursor pointer
  border 1px solid #a3c6f0
  che-border-radius(2px)
  padding 0 25px
  margin-left 10px

.che-toolbar-add-button:hover
  background-color $hover-on-list-color

.che-toolbar-control-button md-icon
  vertical-align inherit

.che-toolbar .che-button.md-button
  color $white-color !important
  font-size 13px !important
  font-weight bold !important
  text-transform uppercase !important
  vertical-align middle
