$bgproc-container-pad: 2px;


.ajs-bg-bgprocess.ajs-visible {
  border: none;
  padding: 0px !important;
  text-align: left;
  color: $color-fg;
  min-width: 500px;
  max-width: 500px;
  .card {
    border:none;
    & .card-header {
      border: $border-width solid $color-primary;
      background: $color-primary;
      color: $color-primary-fg;
    }

    & .card-body {
      padding: 5px;
      border: $border-width solid $card-border-color;
      border-bottom-left-radius: $card-border-radius;
      border-bottom-right-radius: $card-border-radius;
    }
  }
}


.ajs-bg-bgprocess > .pg-bg-bgprocess {
  background-color: $color-primary;
  color: $color-primary-fg;
  padding: $bgproc-container-pad;
  text-align: left;
  font-size: 0.9em;
}

.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
  background-color:  $color-gray-dark;
  margin: (-$bgproc-container-pad) (-$bgproc-container-pad) 5px;
  padding: 5px;
  padding-right: 20px;
  white-space: pre-wrap;
  text-align: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
  font-family: $font-family-editor;
  white-space: nowrap;
  padding: 5px 0px;
}

.pg-bg-click {
  color: $color-gray-lighter;
  text-decoration: underline;
  cursor: pointer;
  padding: 5px 0px;
}

.pg-bg-click:hover {
  color:  $color-gray-dark;
}

.pg-bg-res-out, .pg-bg-res-err {
  white-space: pre-wrap;
}

.pg-bg-res-err {
  color: $color-danger;
}


.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-success,
.bg-process-status .bg-bgprocess-success {
  color: $color-success-light;
  font-weight: bold;
}

.bg-process-status .bg-bgprocess-failed {
  color: $color-danger;
  font-weight: bold;
}

.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
  color: $color-fg;
  background-color: $color-danger-lighter;
}

.pg-panel-content div.bg-process-watcher {
  height: 100%;
  padding: 0px 0px 0px 0px;
}

.pg-bg-process-logs {
  border: $border-width solid $input-border-color;
  border-radius: $input-border-radius;
  padding-inline-start: 1rem;
}

.pg-bg-cmd {
  border: $border-width solid $input-border-color;
  border-radius: $input-border-radius;
  background: $input-disabled-bg;
}

.pg-panel-content .bg-process-footer {
  position: absolute;
  bottom: 0;
  right: 0px;
  left: 0px;
}

.pg-bg-bgprocess .bg-close {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  right: -12px;
  padding: 2px;
  border: 2px solid $color-primary;
  border-radius: 4px;
  opacity: 0.5;
  background-color: $color-bg;
  color: $color-danger;
}