/**
 * @file
 * Visual styling for the toolbar when Settings Tray module is enabled.
 */

/* @todo Move this into toolbar when module is not experimental:
 *   https://www.drupal.org/node/2784593.
 */

/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode {
  background-color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
  color: #999;
}
#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
  color: #333;
}

/* Style both the edit and editing states of the contextual links toggle tab. */
.toolbar-icon-edit.toolbar-item {
  background-color: #50a0e9;
  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  color: #eee;
  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
.toolbar-icon-edit.toolbar-item.is-active {
  background-color: #50a0e9;
  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  color: #eee;
  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
.toolbar-tab:hover > .toolbar-icon-edit,
.toolbar-icon-edit:focus .toolbar-item {
  background-color: #2369a6;
  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  border-color: #1e5c90;
  color: #fff;
  outline: none;
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:before,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  background-image: url(../../../misc/icons/bebebe/pencil.svg);
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
  background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  background-image: url(../../../misc/icons/ffffff/pencil.svg);
}

#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
 background-image: none;
 color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
 background-image: linear-gradient(to bottom, #0094f0, #0e69be);
}
