/* listing.st.css */
@namespace "Listing";

/* = Project and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit;
}

/* = Import Root Component CSS API */
:import {
  -st-from: "../../components/Listing/listing.st.css";
  -st-default: Listing;
  -st-named: itemInnerContainer, itemImage;
}

@st-scope Base {
  Listing {}

  Listing::title {
    margin-top: 1em;
    margin-bottom: calc(1em + var(--spacing-unit));
    font-weight: 300;
  }

  Listing::list {
    margin: calc(var(--spacing-unit) * 3) 0 0 0;
  }

  Listing::item {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  Listing::itemInnerContainer {
    display: flex;
    text-decoration: none;
  }

  Listing::itemImage {
    width: 20%;
    min-width: 100px;
    margin-left: 0;
    margin-bottom: 0;
  }

  Listing::itemBody {
    width: 80%;
    margin-left: calc(var(--spacing-unit) * 2);
  }

  Listing::itemTitle {
    margin: 0;
    margin-bottom: 1em;
  }

  Listing::itemSummary {
    text-decoration: none;
  }

  Listing::plain {}

  Listing::zigzag {}

  /* Listing displayed as zig-zag */
  Listing:type(zigzag)::itemImage {
    width: 100%;
  }

  Listing:type(zigzag)::itemInnerContainer {
    display: block;
  }

  Listing:type(zigzag)::itemImage,
  Listing:type(zigzag)::itemBody {
    flex: 1;
    margin: 0;
  }

  Listing:type(zigzag)::itemTitle {
    margin-top: calc(1em + var(--spacing-unit));
  }
}

@media value(tablet) {
  @st-scope Base {
    Listing:type(zigzag)::itemImage {
      width: auto;
    }

    Listing:type(zigzag)::itemInnerContainer {
      display: flex;
      align-items: center;
    }

    Listing:type(zigzag)::itemTitle {
      margin-top: 0;
    }

    Listing:type(zigzag)::itemBody {
      margin-left: calc(var(--spacing-unit) * 2);
    }

    Listing:type(zigzag) li:nth-child(even) .itemInnerContainer {
      text-align: right;
      flex-direction: row-reverse;
    }

    Listing:type(zigzag) li:nth-child(even) .itemImage {
      margin-right: 0;
      margin-left: calc(var(--spacing-unit) * 2);
    }
  }
}