@import "../../theme/common";

.toolbar {
  background-color: $tertiaryBackgroundColor;;
  color: $tertiaryColor;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}

:global .toolbar-button {
  padding: 0.7rem;
  font-size: 1rem;
  cursor: pointer;
  @include no-select();
}

:global .toolbar-button > i:nth-child(1) {
   margin-right:0.3rem;
}

:global .toolbar-button.disabled {
  color: $secondaryColor
}

:global .toolbar-button:hover:not(.disabled) {
  background: $primaryHoverBackgroundColor;
  color: $primaryHoverColor;
}

.run:before {
  content: "\f04b";
  font-family: FontAwesome;
}

.save:before {
  content: "\f0c7";
  font-family: FontAwesome;
}

.saveAll:before {
  content: "\f0c7";
  font-family: FontAwesome;
}

.spinner {
  flex: 1;
  color: #ffc40d;
  font-size: 1.5rem;
}

.spinner > i {
}

.delete:before {
  content: "\f014";
  font-family: FontAwesome;
}

.logo {
  background: linear-gradient(to left, $tertiaryBackgroundColor 0%, #323c47 100%);
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 0.4rem 2rem 0.4rem 0.2rem;
  display: inline-block;
  cursor: pointer;
  height: 2.5rem;
}

.popup {
  background-color: #424c57;
  position: absolute;
  right: 0;
  padding: 0.5rem;
  top: 2.4rem;
  z-index: 200
}

.popup > div  {
  padding: 0.5rem;
}

.popup > div:hover {
  background-color: $primaryHoverBackgroundColor;
}

.runCaret {
  font-family: FontAwesome;
  padding: 0.5rem;
  font-size: 0.7rem;
}

.runCaret:hover {
  color: $formPrimaryColor;
}

.runCaret:after {
  content: "\f0d7 "
}

.runPopup {
  background-color: #424c57;
  top: 2.4rem;
  position: absolute;
  padding: 0.5rem;
  z-index: 200;
}