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

.user-list {

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

  &-item {

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

    &-heading {

      padding-right: govuk-spacing(3);
      overflow: hidden;
      overflow-wrap: break-word;

      .heading-small {
        color: $black;
      }

    }

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

    & :last-child {
      margin-bottom: 0;
    }

    &-blank {

      margin-bottom: govuk-spacing(3);

      @include govuk-media-query($from: tablet) {
        margin-bottom: 0;
      }

    }

  }

  &-edit-link {

    position: relative;
    display: block;
    margin: govuk-spacing(3) 0 govuk-spacing(3);

    @include govuk-media-query($from: tablet) {
      float: right;
      margin: 0;
    }

    &:focus {
      /* cancel default focus styling in favour of that from :before pseudo class */
      box-shadow: none;
    }

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

      position: absolute;

      top: -1 * govuk-spacing(3) - 1;
      right: 0;
      bottom: -1 * govuk-spacing(3);
      left: -1 * govuk-spacing(3);

      background: transparent;
    }

    &:active:before,
    &:focus:before {
      box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 3px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
      right: -3px;
      left: -3px;

      @include govuk-media-query($from: tablet) {
        border-width: 15px 3px 15px 15px;
        box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
        left: -15px;
      }
    }

  }

}