ws-two-part-allocation-bar {
  $bar-left-color: $color-green;
  $bar-right-color: #3c8280;
  $bar-height: 32px;
  $bar-border-radius: 2px;
  $bar-padding-side: 9px;

  display: block;
  position: relative;

  .bar-outer {
    background-color: $bar-right-color;
    border-radius: $bar-border-radius;
    height: $bar-height;
    position: relative;
  }

  .bar-inner {
    background-color: $bar-left-color;
    border-bottom-left-radius: $bar-border-radius;
    border-top-left-radius: $bar-border-radius;
    height: 100%;
    left: 0;
    position: absolute;
  }

  .bar-text-left,
  .bar-text-right {
    color: $color-white;
    line-height: $bar-height;
    position: absolute;
    top: 1px;
    z-index: 2;
  }

  .bar-text-left {
    left: $bar-padding-side;
  }

  .bar-text-right {
    right: $bar-padding-side;
  }

  .bar-titles {
    @include clearfix;

    color: #a7a7a7;
    margin-bottom: 3px;

    .bar-title-left {
      float: left;
    }

    .bar-title-right {
      float: right;
      text-align: right;
    }
  }
}
