.hb-issue-status {
  &__body {
    margin-left: 34px;
    padding: 10px;
    border-radius: 0px 3px 3px 3px;
  }
}

@mixin status-shadow($color) {
  border: 1px solid rgba($color,0.8);
  background: #fff;
  box-shadow: 0px 1px 2px rgba($color, 0.5);
}

.hb-statuses {
  background: #fff;

  > h3 {
    color: #999;
    padding-left: 50px;
    .hb-status-indicator {
      margin-top: 3px;
      margin-left: -45px;
    }
  }
  &__chart {
    float: left;
    margin-left: -50px;
  }

  position: relative;

  &:before, &:after {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    border-style: solid;
    border-color: transparent;
    pointer-events: none;
  }
  &:after {
    top: 0px;
    left: -9px;
    border-width: 0px 9px 10px 0;
    border-right-color: #fff;

  }
  &:before {
    top: -1px;
    left: -11px;
    border-width: 0px 9px 10px 1px;
    border-right-color: #ccc;
    border-right-color: hsla(0, 0%, 88%, 0.8);

  }
  &--success{
    border: 1px solid $hb-success;
    @include status-shadow($hb-success);
    > h3 {
      color: $hb-success; 
    }
    &:after {
      border-right-color: #fff;

    }
    &:before {
      border-right-color: $hb-success;
      border-right-color: rbga($hb-success, 0.8);
    }
  }
  &--failure{
    border: 1px solid $hb-failure;
    @include status-shadow($hb-failure);
    > h3 {
      color: $hb-failure; 
    }
    &:after {
      border-right-color: #fff;

    }
    &:before {
      border-right-color: $hb-failure;
      border-right-color: rbga($hb-failure, 0.8);
    }
  }
  &--error{
    border: 1px solid $hb-error;
    @include status-shadow($hb-error);
    > h3 {
      color: $hb-error; 
    }
    &:after {
      border-right-color: #fff;

    }
    &:before {
      border-right-color: $hb-error;
      border-right-color: rbga($hb-error, 0.8);
    }
  }
  &--pending{
    border: 1px solid $hb-pending;
    @include status-shadow($hb-pending);
    > h3 {
      color: $hb-pending;
    }
    &:after {
      border-right-color: #fff;

    }
    &:before {
      border-right-color: $hb-pending;
      border-right-color: rbga($hb-pending, 0.8);
    }
  }
  &__status {
    background: #fafafa;
    padding: 9px 12px 9px 60px;
    border-top: 1px solid #ccc;
    margin: 0 -10px;
    a {
      float: right;
    }
    &:last-child {
      margin-bottom: -10px;
    }
    > i {
      margin-right: 3px;
    }
    &--success{
      > i {
        color: $hb-success; 
      }
    }
    &--failure{
      > i {
        color: $hb-failure; 
      }
    }
    &--error{
      > i {
        color: $hb-error; 
      }
    }
    &--pending{
      > i {
        color: $hb-pending; 
      }
    }
  }
}

.hb-status-indicator {

  &--mega {
    float: left;
    height: 30px;
    width: 30px;
    padding: 1px;
    border: 1px solid #fff;
    > i {
      margin-top: 6px;
    }
  }

  &--round {
    float: left;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    > i {
      margin-top: 12px;
    }
  }

  &--mini {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-right: 6px;
    border-radius: 50%;
  }

  > i {
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
  }


  &--success{
    background-color: $hb-purple; 
  }
  &--failure{
    background-color: $hb-red; 
  }
  &--error{
    background-color: $hb-red; 
  }
  &--pending{
    background-color: #cea61b; 
  }
}
