/** container.st.css */
@namespace "Container";

:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --color-accent-1,
    --color-accent-4,
    --color-background-1,
    --color-ui-inverse,
    --gutter-width-md,
    --spacing-unit,
    --grid-gap-xs,
    --grid-base-columns-sm,
    --grid-gap-md,
    --grid-base-columns-md;
}

/* Import style API */
:import {
  -st-from: "../../components/Container/container.st.css";
  -st-default: Container;
}

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

@st-scope Base {
  Container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  Container:size(inset),
  Container:size(outset) {
    width: auto;
    padding-left: var(--gutter-width-md);
    padding-right: var(--gutter-width-md);
  }

  Container:size(fullBleed) {
    padding-left: 0;
    padding-right: 0;
  }

  Container:size(inset) > * {
    /* Grid start and finish for mobile */
    grid-column: content-start / content-end;
  }

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

  Container:size(fullBleed) > * {
    grid-column: full-bleed-start / full-bleed-end;
  }

  Container:bottomSpacing {
    padding-bottom: calc(var(--spacing-unit) * 4);
  }

  /** contaniers with backgrounds will butt up else they have a decent responsive clearance. */
  Container:hasBackground + Container {
    margin-top: 4vh;
  }

  Container + Container:hasBackground {
    margin-top: 6vh;
  }

  /** Variants */
  Container:tone(1) {
    background-color: var(--color-accent-1);
    color: var(--color-ui-inverse);
  }

  Container:tone(1):hasBackground Text {
    color: inherit;
  }

  Container:tone(1):hasBackground Text a {
    color: var(--color-accent-4);
  }

  Container:tone(2) {
    background-color: var(--color-background-1);
  }
}

/** Medium devices (tablets, 950px and up) */
@media value(tablet) {
  @st-scope Base {
    Container:size(inset) {
      max-width: 740px;
    }

    Container:size(outset) {
      /* @TODO: REMOVE -> Without this the promolist first item grey background -100% causing browser horizontal scroll bars */
      overflow: hidden;
      max-width: 1045px;
    }

    /* Do not use margin top, fullBleed maybe used together with : */
    Container:size(fullBleed) {
      max-width: 1920px;
      margin-right: auto;
      margin-left: auto;
    }
  }
}

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

    /* Do not apply grid to Container alone! since body is using container we don't want to apply it twice */
    Container:size(inset),
    Container:size(outset),
    Container:size(fullBleed) {
      padding-left: unset;
      padding-right: unset;
      display: grid;
      grid-column-gap: var(--grid-gap-xs);
      grid-template-columns: var(--grid-base-columns-sm);
    }
  }
}

/* BODY DESKTOP AND ABOVE */
@media value(tablet) {
  @st-scope Base {

    Container:size(inset),
    Container:size(outset),
    Container:size(fullBleed) {
      max-width: unset;
      /* Grid start and finish for desktop */
      grid-column-gap: var(--grid-gap-md);
      grid-template-columns: var(--grid-base-columns-md);
    }

    Container:size(fullBleed) {
      max-width: 1920px;
      margin-right: auto;
      margin-left: auto;
    }
  }
}