// vf-content

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

// we use `not([class*='vf-'])` to ensure we only apply styling where a
// vf-* class hasn't been able to be applied

.vf-content {

  h1:not([class*='vf-']) {
    @include set-type(text-heading--1, $custom-margin-bottom: 0);

    + small {
      margin-bottom: 35px;
      margin-top: 22px;
    }

    b,
    strong {
      font-weight: inherit;
    }
  }

  h2:not([class*='vf-']) {
    @include set-type(text-heading--2);

    b,
    strong {
      font-weight: inherit;
    }
  }

  h3:not([class*='vf-']) {
    @include set-type(text-heading--3);

    b,
    strong {
      font-weight: inherit;
    }
  }

  h4:not([class*='vf-']) {
    @include set-type(text-heading--4);

    b,
    strong {
      font-weight: inherit;
    }
  }

  h5:not([class*='vf-']) {
    @include set-type(text-heading--5);

    b,
    strong {
      font-weight: inherit;
    }
  }

  h6:not([class*='vf-']) {
    @include set-type(text-heading--5);

    b,
    strong {
      font-weight: inherit;
    }
  }

  // remove the top margin from first items because some times the first item is an h3
  & > :first-child {
    margin-top: 0 !important;
  }

  p:not([class*='vf-']) {
    @include set-type(text-body--2, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
  }

  .vf-link,
  a:not([class*='vf-']) {
    @include inline-link(
      $vf-link--hover-color: $vf-link--hover-color,
      $vf-link--visited-color: color(purple),
      $vf-include-normalisations: true
    );
  }

  small:not([class*='vf-']) {
    @include set-type(text-body--5);

    display: block;
  }

  ol:not([class*='vf-']) {
    @include list(vf-list--ordered, ordered);
    padding-left: 20px;
  }

  ul:not([class*='vf-']) {
    @include list(vf-list--unordered, unordered);
    padding-left: 20px;
  }

  li:not([class*='vf-']) {
    @include set-type(text-body--2);

    margin-bottom: map-get($vf-spacing-map, vf-spacing--200);

    > ul:not([class*='vf-']),
    > ol:not([class*='vf-']) {
      margin-top: map-get($vf-spacing-map, vf-spacing--200);
    }
  }

  li:not([class*='vf-']):last-of-type {
    margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
  }

  dl:not([class*='vf-']) {
    dt:not([class*='vf-']) {
      @include set-type(text-heading--4, $custom-margin-bottom: 8px);
    }
    dd:not([class*='vf-']) {
      @include set-type(text-body--2);
    }
  }

  img:not([class*='vf-']) {
    height: auto;
    max-width: 100%;
  }

  hr:not([class*='vf-']) {
    @include divider;
  }

  code:not([class*='vf-']) {
    background: set-color(vf-ui-color--off-white);
    padding-left: 3px;
    padding-right: 3px;
  }

  blockquote:not([class*='vf-']) {
    @include blockquote('vf-spacing--400');

    p:last-of-type:not([class*='vf-']) {
      margin-bottom: 0;
    }
  }

  table:not([class*='vf-']) {
    background-color: ui-color(white);
    border-collapse: collapse;

    caption {
      @include set-type(text-heading--4);

      text-align: left;
    }

    thead {
      background-color: color(grey--lightest);

      th {
        @include set-type(text-heading--5, $custom-margin-bottom: 0);

        padding: 8px 16px;
        text-align: left;
      }
    }

    td {
      @include set-type(text-body--2, $custom-margin-bottom: 0);

      padding: 8px 16px;
      text-align: left;
      vertical-align: top;
    }

    tr:nth-of-type(even) {
      background-color: ui-color(grey--light);
    }
    tfoot {
      background-color: color(grey--lightest);
      border-top: 1px solid ui-color(black);

      td {
        padding: 8px 16px;
      }
    }
  }

  figcaption:not([class*='vf-']),
  cite:not([class*='vf-']) {
    // matches @mixin figure, but that is not directly usable here as it requires css classes
    @include set-type(text-body--3);
    color: color(grey--dark);
  }

  .vf-video {
    // TODO: Make a function for vf-spacing map
    margin-bottom: 32px;
  }

  // the use cases of `vf-content figure` is slightly different that .vf-figure
  // as we need to account for a lack of being able to specify left/right positioning
  // https://github.com/visual-framework/vf-core/issues/1583
  figure:not([class*='vf-']) {
    display: table;
    margin: auto;

    img:not([class*='vf-']) {
      display: block;
      height: auto;
      max-width: 100%;
    }

    figcaption:not([class*='vf-']) {
      caption-side: bottom;
      display: table-caption;
    }
  }

  .vf-figure--align-inline-start {
    margin-bottom: 32px;
    margin-right: 32px;
  }
  .vf-figure--align-inline-end {
    margin-bottom: 32px;
    margin-left: 32px;
  }
}

.vf-content__standfirst {
  font-size: 21px;
  line-height: 31px;
  margin-bottom: 46px;
  margin-top: 0;

  + .vf-content__standfirst {
    margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
  }

  + small {
    margin-bottom: 42px;
  }
}