/* promolist.st.css  */
@namespace "PromoList";

:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    --spacing-unit,
    --gutter-width-md,
    --grid-gap-md,
    --grid-base-columns-md,
    --grid-inner-base-columns,
    /* Colours */
    --background-hover-color,
    --color-accent-1,
    --color-heading,
    --color-background-1,
    --light
}

:import {
  -st-from: "../../components/PromoList/promolist.st.css";
  -st-default: PromoList;
}

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

:import {
  -st-from: "../../components/Image/image.st.css";
  -st-default: Image;
}

:import {
  -st-from: "../../components/Link/link.st.css";
  -st-default: Link;
}

:import {
  -st-from: "../../components/Card/card.st.css";
  -st-default: Card;
}

@st-scope Base {
  PromoList Card {
    margin: 0 0 calc(var(--spacing-unit) * 4);
  }

  PromoList::title {
    color: var(--color-heading);
    padding: calc(1em + var(--spacing-unit)) 0 0;
    margin-bottom: 1em;
    font-weight: 300;
  }

  PromoList::groupButton {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }
}

/* Large devices */
@media value(laptop) {
  @st-scope Base {

    /* First item promoted */
    PromoList:hasFirstItemPromoted Card:first-child {
      position: relative;
    }

    PromoList:hasFirstItemPromoted Card:first-child Image::imageContainer {
      /* Overflow should be visible for the background color */
      overflow: visible;
    }

    PromoList:hasFirstItemPromoted Card:first-child Image {
      width: 100%;
    }

    /* @TODO: Bring containers inside components so we don't have to these CSS hacks */
    PromoList:hasFirstItemPromoted Card:first-child Image::imageContainer::before,
    PromoList:hasFirstItemPromoted Card:first-child Image::imageContainer::after {
      display: block;
      position: absolute;
      z-index: 0;
      content: "";
      width: 100%;
      height: 100%;
      background-color: var(--color-background-1);
    }

    PromoList:hasFirstItemPromoted Card:first-child Image::imageContainer::before {
      top: 0;
      left: -100%;
    }

    PromoList:hasFirstItemPromoted Card:first-child Image::imageContainer::after {
      top: 0;
      right: -100%;
    }

    /* Two and three items need to sit side by side , grid setup */
    PromoList:noOfItems(2)::list,
    PromoList:noOfItems(3)::list {
      display: grid;
      grid-column-gap: var(--grid-gap-md);
      grid-template-columns: var(--grid-inner-base-columns);
    }

    /* Two items */
    PromoList:noOfItems(2) Card {
      grid-column: auto / span 6;
    }

    /* Three items 33% each item sitting in the grid */
    PromoList:noOfItems(3) Card {
      grid-column: auto / span 4;
    }
  }
}