// Toolbar
//
// Styleguide Toolbar

.toolbar {
  pointer-events: none;

  &.is-sticky {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }

  &.is-active {
    pointer-events: auto;
  }
}

.toolbar__inner {
  background-color: transparent;
  text-align: left;
  padding: $baseline-unit*4 0;
  width: 100%;
}

.toolbar__btn--mode {
  float: right;
}

.toolbar button {
  border: 0;
  border-radius: 3px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 25px;
  margin: 0 8px 0 0;
  position: relative;
  text-align: center;
  width: 30px;
}

.toolbar button,
.toolbar button[disabled] {
  background: #e3e3e3;
}

.toolbar.is-active button {
  background-color: rgba(#94e58f,.4);
}

.toolbar button:last-child:before,
.toolbar button:last-child:after {
  display: none;
}

.toolbar button.active {
  background-color: #94e58f;
}

// Toolbar
//
// Styleguide Toolbar

.toolbar {
  pointer-events: none;

  &.is-sticky {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }

  &.is-active {
    pointer-events: auto;
  }
}

.toolbar__inner {
  background-color: transparent;
  text-align: left;
  padding: $baseline-unit*4 0;
  width: 100%;
}

.toolbar__btn--mode {
  float: right;
}

.toolbar button {
  border: 0;
  border-radius: 3px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 25px;
  margin: 0 8px 0 0;
  position: relative;
  text-align: center;
  transition: background, $transition-hover-params;
  width: 30px;
}

.toolbar button,
.toolbar button[disabled],
.toolbar.is-active button[disabled] {
  background: #e3e3e3;
}

.toolbar.is-active button {
  background-color: rgba(#94e58f,.4);
}

.toolbar button:last-child:before,
.toolbar button:last-child:after {
  display: none;
}

.toolbar button.active,
.toolbar button:hover {
  background-color: #94e58f;
}

Add hover transition to toolbar buttons
Add hover transition to toolbar buttons
