mixin StretchedLinkExampleDescription
  p&attributes(attributes) Add 
    code .stretched-link 
    |  to a link to make its containing block clickable via a 
    code ::after
    |  pseudo element. In most cases, this means that an element with 
    code position: relative; 
    |  that contains a link with the 
    code .stretched-link 
    |  class is clickable. 
  p Cards have 
    code position: relative 
    | by default in Bootstrap, so in this case you can safely add the 
    code .stretched-link 
    | class to a link in the card without any other HTML changes.
  p.mb-0 Multiple links and tap targets are not recommended with stretched links. However, some 
    code position 
    | and 
    code z-index 
    |  styles can help should this be required.

mixin StretchedLinkExampleDemo
  .card(style='width: 18rem;')
    = '\n'
    img.card-img-top(src=`${CWD}assets/img/generic/1.jpg`, alt='...')
    .card-body
      h5.card-title Card with stretched link
      p.card-text
        | Some quick example text to build on the card title and make up the bulk of the card's content.
      a.btn.btn-primary.stretched-link(href='#') Go somewhere

mixin StretchedLinkContainingBlockHeader
  h5(data-anchor) Identifying the containing block
  p
    | If the stretched link doesn’t seem to work, the 
    a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block') containing block
    |  will probably be the cause. The following CSS properties will make an element the containing block:
  ul.mb-0
    li
      | A 
      code position
      |  value other than 
      code static
    li
      | A 
      code transform
      |  or 
      code perspective
      |  value other than 
      code none
    li
      | A 
      code will-change
      |  value of 
      code transform
      |  or 
      code perspective
    li
      | A 
      code filter
      |  value other than 
      code none
      |  or a 
      code will-change
      |  value of 
      code filter
      |  (only works on Firefox)

mixin StretchedLinkContainingBlockDemo
  .card.shadow-lg(style='width: 18rem;')
    img.card-img-top(src=`${CWD}assets/img/generic/2.jpg`, alt='...')
    .card-body
      h6.card-title.fs-6 Card with stretched links
      p.card-text
        | Some quick example text to build on the card title and make up the bulk of the card's content.
      p.card-text
        a.stretched-link.text-info(href='#' style='position: relative;')
          | Stretched link will not work here, because 
          code.text-danger position: relative
          |  is added to the link
      p.card-text.bg-body-tertiary(style='transform: rotate(0);')
        | This 
        a.text-warning.stretched-link(href='#') stretched link
        |  will only be spread over the 
        code p
        | -tag, because a transform is applied to it.