%tick-cross {
  @include core-19;
  display: inline-block;
  background-size: 19px 19px;
  background-repeat: no-repeat;
  background-position: 0 6px;
  padding: 6px 0 5px 25px;
}

.tick-cross {

  &-tick {
    @extend %tick-cross;
    background-image: file-url('tick.png');
  }

  &-cross {
    @extend %tick-cross;
    color: $secondary-text-colour;
    background-image: file-url('cross-grey.png');
    box-shadow: inset 20px 0 0 0 rgba(255, 255, 255, 0.6);
  }

  &-list {

    @extend %grid-row;
    position: relative;

    &-permissions {

      @include grid-column(3/4);
      margin-top: 5px;

      li {
        display: block;
        margin-right: 0.5em;
      }

    }

    &-edit-link {

      text-align: right;
      position: absolute;
      top: -25px;
      right: -135px;

      a {

        &:before {
          content: "";
          display: block;

          position: absolute;

          top: -$gutter-half - 1;
          right: 0;
          bottom: -$gutter-half;
          left: -$gutter-half;

          background: transparent;
        }

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

        &:active,
        &:focus {

          color: $black;

          &:before {
            border-color: $yellow;
            border-style: solid;
            border-width: 15px 3px 15px 15px;
            right: -3px;
          }

        }

      }

    }

    &-hint {
      color: #6F777B;
      padding-top: 5px;
    }

  }

}