.juju-shell {
  width: 100%;
  background-color: $color-dark;

  &__header {
    background-color: $dark-warm-grey;
    color: $light-grey;
    text-align: center;
    line-height: 30px;
    height: 30px;
    position: relative;

    &-actions {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 36px;

      .svg-icon {
        stroke: $mid-grey;
        fill: $mid-grey;
        margin-right: 12px;
        cursor: pointer;
      }

      .svg-icon:hover {
        stroke: $light-grey;
        fill: $light-grey;
      }

    }
  }

  &__terminal {
    width: 100%;

    &--min {
      height: 150px;
    }
  }

  // xterm.scss overrides.
  .terminal {
    background-color: $color-dark;
    color: $light-grey;

    .xterm-viewport::-webkit-scrollbar-track  {
      background-color: $color-dark;
    }

    .xterm-viewport {
      background-color: $color-dark;
    }

    .xterm-rows,
    .xterm-selection {
      font-family: "ubuntu mono";
      background-color: $color-dark;
      left: 10px;
    }
  }
}

.juju-shell {
  width: 100%;
  background-color: $color-dark;
  box-shadow: $box-shadow-dark;

  &__header {
    background-color: $dark-warm-grey;
    color: $light-grey;
    text-align: center;
    line-height: 30px;
    height: 30px;
    position: relative;

    &-actions {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 36px;

      .svg-icon {
        stroke: $mid-grey;
        fill: $mid-grey;
        margin-right: 12px;
        cursor: pointer;
      }

      .svg-icon:hover {
        stroke: $light-grey;
        fill: $light-grey;
      }

    }
  }

  &__terminal {
    width: 100%;

    &--min {
      height: 150px;
    }
  }

  // xterm.scss overrides.
  .terminal {
    background-color: $color-dark;
    color: $light-grey;

    .xterm-viewport::-webkit-scrollbar-track  {
      background-color: $color-dark;
    }

    .xterm-viewport {
      background-color: $color-dark;
    }

    .xterm-rows,
    .xterm-selection {
      font-family: "ubuntu mono";
      background-color: $color-dark;
      left: 10px;
    }
  }
}

Add the dark box-shadow to the terminal UI so it appears on top of the inspector and other elements.
Add the dark box-shadow to the terminal UI so it appears on top of the inspector and other elements.
