.widget-toolbar {
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: stretch;
}

.widget-toolbar-pane {
  display: flex;
  align-items: stretch;
  flex-grow: 1;
}
.widget-toolbar-pane.middle {
  justify-content: center;
}
.widget-toolbar-pane.right {
  justify-content: flex-end;
}

.widget-toolbar-button {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 0.5em 0.25em;
  cursor: pointer;
}
.widget-toolbar-button svg {
  height: 1.25em;
  fill: #595959;
}
.widget-toolbar-button.fix-stroke svg {
  stroke: #595959;
}

.widget-toolbar-button:hover {
  background: #f9f9f9;
}
.widget-toolbar-button:hover svg {
  fill: #000;
}
.widget-toolbar-button.fix-stroke:hover svg {
  stroke: #000;
}

.widget-toolbar-button.selected {
  background: #2b97ef;
}
.widget-toolbar-button.selected:hover {
  background: #288bdb;
}
.widget-toolbar-button.selected svg {
  fill: #fff;
}
.widget-toolbar-button.fix-stroke.selected svg {
  stroke: #fff;
}

.widget-toolbar-button.selected-fill svg {
  fill: #2b97ef;
}
.widget-toolbar-button.fix-stroke.selected-fill svg {
  stroke: #2b97ef;
}

.widget-toolbar-button.disabled {
  cursor: default;
}
.widget-toolbar-button.disabled:hover {
  background: none;
}
.widget-toolbar-button.disabled svg {
  fill: #d9d9d9;
}
.widget-toolbar-button.fix-stroke.disabled svg {
  stroke: #d9d9d9;
}

/* Adjustments */
.widget-toolbar-button.span-coloring svg {
  height: 1.5em;
  position: relative;
  top: 2px;
}
.widget-toolbar-button.group-layout svg {
  height: 1.4em;
}
