$item-top-padding: govuk-spacing(3);

.history-list {

  @include core-19;
  margin-bottom: govuk-spacing(6);

  &-item {

    padding: $item-top-padding 0 govuk-spacing(3) 0;
    border-top: 1px solid $border-colour;
    position: relative;

    &:last-child {
      border-bottom: 1px solid $border-colour;
    }

    .page-footer {
      margin-bottom: 5px;
    }

  }

  &-user {
    display: block;
  }

  &-time {
    display: block;
    color: $secondary-text-colour;
  }

  &-percentage {

    $axis-thickness: 2px;
    border-bottom: $axis-thickness solid $black;
    position: relative;
    margin-bottom: 35px;
    height: 35px;

    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      height: 10px;
      width: $axis-thickness;
      background: $black;
    }

    &:after {
      left: auto;
      right: 0;
    }

    &-without-border {
      position: relative;
      padding-top: 35px;
    }

    &-marker {
      $size: 20px;
      $border-thickness: 7px;
      $text-width: 100px;
      display: block;
      width: $size;
      height: $size;
      position: absolute;
      top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
      margin-left: 0 - ($size / 2) - $border-thickness;
      background: $black;
      border-radius: $size;
      border: $border-thickness solid $white;
    }

    &-left-label,
    &-right-label {
      width: 100%;
      position: absolute;
      top: 0;
    }

    &-left-label {
      left: 0;
    }

    &-right-label {
      right: 0;
      text-align: right;
    }

  }

}