@use "govuk-frontend/dist/govuk" as *;

@include govuk-exports("govuk-eleventy-plugin/component/document-list") {
  .app-document-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .app-document-list__item {
    border-top: 1px solid $govuk-border-colour;
    margin-bottom: govuk-spacing(5);
    padding-top: govuk-spacing(2);
  }

  .app-document-list__item-title {
    @include govuk-font($size: 19, $weight: "bold");
    margin: 0 0 govuk-spacing(1);
  }

  .app-document-list__item-metadata {
    margin: 0;
    padding: 0;
  }

  .app-document-list__item-description {
    @include govuk-font($size: 16);
    margin: govuk-spacing(1) 0;
  }

  .app-document-list__attribute {
    @include govuk-font($size: 16);
    color: $govuk-secondary-text-colour;
    display: inline-block;
    margin: 0;

    & + .app-document-list__attribute::before {
      content: "\2002•\2002";
    }
  }

  .app-document-list--large {
    .app-document-list__item-title {
      @include govuk-font($size: 24, $weight: "bold");
    }

    .app-document-list__item-description {
      @include govuk-font($size: 19);
    }

    .app-document-list__attribute {
      @include govuk-font($size: 16);
    }
  }
}