$border-colour: govuk-colour('dark-grey');
$white: govuk-colour('white');

%dm-document-list,
.dm-document-list {
  @extend %govuk-list;
  margin: 0;
  padding: 0 0 30px 0;

  li {
    margin-bottom: govuk-spacing(6)
  }
}

.dm-document-list-item {
  list-style: none;
}

%dm-document-link,
.dm-document-link {
  @extend %govuk-link;
  box-sizing: border-box;
  // display: inline-block;

  /* Same as values as `question-meta-spacing` but preserved on mobile */
  margin-bottom: 10px;
  padding-top: 7px;
  padding-bottom: 7px;

  position: relative;
  width: 100%; /* Trigger HasLayout on older IEs */
}

.dm-document-link-with-icon {
  @extend %dm-document-link;
  padding-left: 65px;
  display: inline-block;
}

.dm-document-icon {
  font-weight: $govuk-font-weight-bold;
  border: 1px solid $border-colour;
  color: $border-colour;
  padding: 7px 13px 5px 5px;
  margin: -18px 10px 5px 0;
  display: block;
  position: absolute;
  top: 51%;
  left: 0;
  background: transparent;
  text-transform: lowercase;
  text-decoration: none;

  &:before {
    content: '.'; /* Insert this with CSS so that it doesn't get read out */
  }

  &:after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    height: 10px;
    width: 10px;
    text-transform: lowercase;
    background: $white; /* For browsers that don't support linear gradient */
    background: linear-gradient(
      45deg,
      $white,
      $white 47%,
      $border-colour 48%,
      $border-colour 53%,
      $white 53%
    );
    box-shadow: -1px 1px 0 0 $border-colour, -2px 2px 5px 0 rgba($border-colour, 0.2);
  }
}