/* body.st.css */
@namespace "Body";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --font-family-base,
    --gutter-width-md,
    --grid-gap-xs,
    --grid-base-columns-sm,
    --grid-gap-md,
    --grid-base-columns-md,
    --color-body,
    --color-accent-2,
    --color-valid,
    --color-warn,
    --color-ui,
    --color-ui-alpha1,
    --color-ui-inverse;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/Body/body.st.css";
  -st-default: Body;
}

/* = Import potential children CSS API's. */
:import {
  -st-from: "../../components/Image/image.st.css";
  -st-default: Image;
}

:import {
  -st-from: "../../components/Media/media.st.css";
  -st-default: Media;
}

:import {
  -st-from: "../../components/IframeWrapper/iframewrapper.st.css";
  -st-default: IframeWrapper;
}

:import {
  -st-from: "../../components/Panel/panel.st.css";
  -st-default: Panel;
}

:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

@st-scope Base {
  Body {
    --blockquote-bar-color: var(--color-accent-2);
    --blockquote-border-radius: 4px;
  }

  Body {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-body);
    font-family: var(--font-family-base);
  }

  /** Extra small devices and above  */
  Body > * {
    max-width: 100%;
    margin-left: var(--gutter-width-md);
    margin-right: var(--gutter-width-md);
  }
}

/** Medium devices (tablets, 950px and up) */
@media value(tablet) {
  @st-scope Base {
    Body {
      font-size: 1.125rem;
    }

    Body > * {
      max-width: 730px;
      margin-left: auto;
      margin-right: auto;
    }

    /* For browsers that don't support grid */
    Body Image:imageSize(outset),
    Body Media:mediaSize(outset) {
      margin-left: auto;
      margin-right: auto;
    }

    Body Image:imageSize(outset)::imageContainer,
    Body Media:mediaSize(outset)::mediaContainer {
      margin-left: -140px;
      margin-right: -140px;
    }

    Body Image:imageSize(outset) img,
    Body Media:mediaSize(outset) img {
      width: 100%;
    }
  }
}

@st-scope Base {

  /* LISTS UL, OL, DL */
  Body ul,
  Body ol {
    /* Do not give margin right left value or IE breaks */
    padding: 0 calc(var(--spacing-unit) * 5);
    margin-top: calc(var(--spacing-unit) * 3);
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  Body ol ol,
  Body ol ul,
  Body ul ol,
  Body ul ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  Body ul li,
  Body ol li {
    padding: 0;
    margin: 0 0 calc(.65em + var(--spacing-unit));
  }

  /* DL @TODO */
  Body dl {
    /* Do not give margin right left or IE breaks */
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  Body dd {
    margin: 0 0 calc(.65em + var(--spacing-unit));
  }

  Body dt {
    font-weight: 700;
    margin-bottom: var(--spacing-unit);
  }

  Body dd,
  Body dt {
    padding: 0;
  }

  Body strong {
    font-weight: 700;
  }
}

/* If browser supports grid. */
@supports (display: grid) {
  @st-scope Base {

    /* BODY MOBILE STYLING */
    Body {
      display: grid;
      grid-column-gap: var(--grid-gap-xs);
      grid-template-columns: var(--grid-base-columns-sm);
    }

    Body > * {
      /* unset styles for grid supporting devices */
      max-width: none;
      margin-left: unset;
      margin-right: unset;
      /* Grid start and finish for mobile */
      grid-column: content-start / content-end;
    }

    Body:size(inset) > * {
      /* Grid start and finish for inset, same as default */
      grid-column: content-start / content-end;
    }

    Body:size(outset) > * {
      /* Grid start and finish for outset */
      grid-column: outset-start / outset-end;
    }

    Body:size(fullBleed) > * {
      /* Grid start and finish for full bleed */
      grid-column: full-bleed-start / full-bleed-end;
    }

    /* IMAGE inside BODY */
    Body Image,
    Body Media {
      grid-column: content-start / content-end;
    }

    Body Image:imageSize(outset),
    Body Media:mediaSize(outset) {
      margin-left: unset;
      margin-right: unset;
      grid-column: outset-start / outset-end;
    }

    Body Image:imageSize(outset)::imageContainer,
    Body Media:mediaSize(outset)::mediaContainer {
      margin-left: unset;
      margin-right: unset;
    }

    Body Image:imageSize(fullBleed),
    Body Media:mediaSize(fullBleed) {
      grid-column: full-bleed-start / full-bleed-end;
    }

    Body Image::figcaption,
    Body Media::figcaption {
      /* Switch off problematic basic styles. */
      max-width: none;
      margin-left: unset;
      margin-right: unset;
      /* Grid */
      display: grid;
      grid-column-gap: var(--grid-gap-xs);
      grid-template-columns: var(--grid-base-columns-sm);
    }

    Body Image::captionGroup,
    Body Media::captionGroup {
      grid-column: 1 / span 12;
    }

    Body Image:imageSize(fullBleed)::captionGroup,
    Body Media:mediaSize(fullBleed)::captionGroup {
      grid-column: 2 / span 12;
    }
  }
}

/* BODY DESKTOP AND ABOVE */
@media value(tablet) {
  @st-scope Base {
    Body {
      /* Grid start and finish for desktop */
      grid-column-gap: var(--grid-gap-md);
      grid-template-columns: var(--grid-base-columns-md);
    }

    Body > * {
      grid-column: content-start / content-end;
    }

    Body Panel {
      margin-right: -80px;
      margin-left: -102px;
    }

    Body Image::figcaption,
    Body Media::figcaption {
      /* Grid breakpoint overrides. */
      grid-column-gap: var(--grid-gap-md);
      grid-template-columns: var(--grid-base-columns-md);
    }

    Body Image:imageSize(fullBleed)::figcaption,
    Body Media:mediaSize(fullBleed)::figcaption {
      margin-left: unset;
      margin-right: unset;
    }

    Body Image:imageSize(fullBleed)::captionGroup,
    Body Media:mediaSize(fullBleed)::captionGroup {
      grid-column: outset-start / outset-end;
    }
  }
}

/** Text spacing within Body */
/*
  Note we are using the direct desendant selector to stop styles
  being inherited by any isolated application component that might
  be positioned within Body.
*/
@st-scope Base {

  Body > Text:variant(title2),
  Body > Text:variant(title3),
  Body > Text:variant(title4),
  Body > Text:variant(title5) {
    margin-top: calc(.75em);
  }

  Body > Text:variant(title2),
  Body > Text:variant(title3) {
    margin-bottom: calc(.45em + var(--spacing-unit));
  }

  Body > Text:variant(title4),
  Body > Text:variant(title5),
  Body > Text:variant(title6),
  Body > Text:variant(body) {
    margin-bottom: calc(.65em + var(--spacing-unit));
  }

  /** Image & Media within Body */
  Body > Image,
  Body > Media,
  Body > IframeWrapper {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }
}

@supports (display: grid) {
  @st-scope Base {

    /* Height fix for videos in iframe, breaks IE videos */
    Body > IframeWrapper {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
    }

    Body > IframeWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

@st-scope Base {

  /* Addition spacing for titles following a Media/Image component. */
  Body > Image + Text:variant(title2),
  Body > Media + Text:variant(title2),
  Body > IframeWrapper + Text:variant(title2),
  Body > Image + Text:variant(title3),
  Body > Media + Text:variant(title3),
  Body > IframeWrapper + Text:variant(title3) {
    margin-top: calc(.6em);
  }

  /* Apply some top margin to body text that follows an Image. */
  Body > Image + Text:variant(body),
  Body > Media + Text:variant(body),
  Body > IframeWrapper + Text:variant(body) {
    margin-top: calc(2em + var(--spacing-unit))
  }

  /* Apply some top margin to media/image that follows Text. */
  Body > Text + Image,
  Body > Text + Media,
  Body > Text + IframeWrapper {
    margin-top: calc(var(--spacing-unit) * 4.5);
  }

  /* BLOCKQUOTE */
  Body blockquote {
    position: relative;
    padding: 30px 30px 30px 38px;
  }

  Body blockquote::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 6px;
    height: 100%;
    background-color: var(--blockquote-bar-color);
    border-radius: var(--blockquote-border-radius);
  }

  Body blockquote p {
    margin-top: calc(var(--spacing-unit) * 3);
  }
}