$indicator-colour: $black;

%task-list-indicator {
  @include bold-16;
  display: inline-block;
  padding: 3px 8px 1px 8px;
  position: absolute;
  right: 0;
  top: $gutter - 2px;
  margin-top: -15px;
  border: 2px solid $indicator-colour;
  pointer-events: none;
  z-index: 2;
  min-width: 20%;
  text-align: center;
}

.task-list {

  border-top: 1px solid $border-colour;
  margin: $gutter 0;

  &-item {

    position: relative;

    a {
      border-bottom: 1px solid $border-colour;
      display: block;
      padding: $gutter-half 0;
      padding-right: 20%;
      position: relative;

      &:hover {
        color: $link-hover-colour;
      }

      &:focus {
        outline: none;
        color: $black;
        box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
        border-color: transparent;
        top: -1px;
        margin-bottom: -2px;
        padding-top: $gutter-half + 1px;
        padding-bottom: $gutter-half + 1px;
      }

    }

  }

  &-indicator-completed {
    @extend %task-list-indicator;
    background-color: $indicator-colour;
    color: $grey-4;
    // Just a pinch of letter spacing to make reversed-out text a bit
    // easier to read
    letter-spacing: 0.02em;
  }

  &-indicator-not-completed {
    @extend %task-list-indicator;
    background-color: $white;
    color: $indicator-colour;
  }

}