Highlight

@charset 'UTF-8';

/**
 * Highlight visually content
 *
 * 1. Make link accessible
 * 2. Remove bottom margin of the last element
 */
.highlight-dark {
  --highlight-color: #{$white};
  --highlight-background-color: #{$dark};
  --highlight-title-color: #{$vd-primary-lighter};
}

.highlight-light {
  --highlight-color: #{$black};
  --highlight-background-color: #{$vd-neutral-light};
  --highlight-title-color: #{$vd-primary-dark};
}

.vd-highlight {
  padding: ($spacer * 2) ($spacer * 3);
  background: var(--highlight-background-color);
  color: var(--highlight-color);

  > h1,
  > .h1,
  > h2,
  > .h2,
  > h3,
  > .h3,
  > h4,
  > .h4,
  > h5,
  > .h5 {
    margin-top: 0;
  }

  /* stylelint-disable selector-list-comma-newline-after */
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    font-weight: 300;
    color: var(--highlight-title-color);
  }
  /* stylelint-enable */

  a {
    &,
    &:visited {
      color: var(--highlight-color); /* [1] */
    }

    &:focus {
      color: $body-color; /* [1] */
    }
  }

  > :last-child {
    margin-bottom: 0; /* [2] */
  }

  .vd-list-links {
    color: var(--highlight-color);
  }
}