/* featuredlist.st.css */
@namespace "FeaturedList";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --grid-gap-md,
    --grid-base-columns-md,
    --color-hint;
}

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

/* description comes from the ContentContainer so we need to grab it from here. */
:import {
  -st-from: "../../components/ContentContainer/contentcontainer.st.css";
  -st-named: description;
}

@st-scope Base {
  FeaturedList::title {
    margin-top: 1em;
    margin-bottom: calc(1em + var(--spacing-unit));
    text-align: center;
    font-weight: 300;
  }

  FeaturedList::description {
    margin-bottom: calc(1em + var(--spacing-unit));
  }

  FeaturedList::title + .description {
    margin-top: calc(var(--spacing-unit) * -3)
  }

  /* Item image */
  FeaturedList::itemImage {
    width: 72px;
    /* min-width is to prevent old IE from squashing images when there's a lot of text */
    min-width: 72px;
    border-radius: 50%;
    margin: 0 auto calc(var(--spacing-unit) * 2);
  }

  /* List styling */
  FeaturedList::list {
    margin: calc(var(--spacing-unit) * 3) 0 0 0;
    padding: 0;
    list-style: none;
  }

  /* Featured Item */
  FeaturedList::item {
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
  }

  /* Item body - contains all text for item */
  FeaturedList::itemBody {}

  /* Item title */
  FeaturedList::itemTitle {
    margin-bottom: var(--spacing-unit);
  }

  /* Item sub-title */
  FeaturedList::itemSubTitle {
    color: var(--color-hint);
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  FeaturedList::itemSummary {
    color: var(--color-hint);
  }
}

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

    /* Main title above the group */
    FeaturedList::title {
      text-align: start;
    }

    FeaturedList::item {
      text-align: start;
      display: flex;
      align-items: center;
    }

    /* Item image */
    FeaturedList::itemImage {
      width: 140px;
      /* min-width is to prevent old IE from squashing images when there's a lot of text */
      min-width: 140px;
      margin: 0 calc(var(--spacing-unit) * 3) 0 0;
    }
  }
}