$slab-button-background-color: $dark !default;

.btn:not(.btn-primary),
.btn:not(.btn-secondary),
.btn:not(.btn-info),
.btn:not(.btn-success),
.btn:not(.btn-warning),
.btn:not(.btn-danger),
.btn:not(.btn-light),
.btn:not(.btn-dark),
.btn:not(.btn-link),
.btn:not(.btn-outline-primary),
.btn:not(.btn-outline-secondary),
.btn:not(.btn-outline-info),
.btn:not(.btn-outline-success),
.btn:not(.btn-outline-warning),
.btn:not(.btn-outline-danger),
.btn:not(.btn-outline-light),
.btn:not(.btn-outline-dark),
.btn:not(.btn-outline-link) {
  background-color: $slab-button-background-color;
  color: white;
  border-color: $slab-button-background-color;

  &:hover {
    background-color:  $slab-button-background-color;;
    border-color: $primary;
  }
}


systelab-button {
  .slab-btn {
    order: 0;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    padding: 9px 12px;
    border-radius: 4px;

    color: white;
    border: 1px solid $slab-button-background-color;
    background-color:  $slab-button-background-color;

    &:hover:enabled {
      border: 1px solid $primary;
      color: white;
      background-color:  $slab-button-background-color;;
    }
    &:focus {
      box-shadow: 0 0 0 3px scale-color($primary, $alpha: -75%);
    }
  }

  .slab-btn-small {
    font-size: 0.875rem;
    padding: 7px 11px;
  }
  .slab-btn-medium {
    font-size: 1rem;
    padding: 9px 12px;
  }
  .slab-btn-large {
    font-size: 1.25rem;
    padding: 14px 16px;
  }

}


systelab-toggle-button {
  .btn {
    &.btn-outline-primary {
      color: white;
      background-color: $slab-button-background-color;
      border-color: $slab-button-background-color;
    }

    &.btn-primary {
      background-color: $primary;
      border-color: $primary;
    }
  }
}