/* Stack Smart Art CSS Library */

/* Main container */
.sm-stack {
  --width: 600px; /* Width of the smartart */
  --header-width: 200px; /* Width of each header */
  --gap: 15px; /* Gap between items */
  --bg: #e0e0e0; /* Header background color */
  --fg: #000; /* Header foreground color */
  --bg-alt: transparent; /* COntent background color */
  --fg-alt: currentColor; /* Content foreground color */

  > ul,
  > ol {
    list-style: none; /* Remove default list styling */
    display: flex; /* Vertical layout for items */
    flex-direction: column;
    margin: 0 auto; /* Center the list */
    gap: var(--gap); /* Gap between items */
    width: var(--width);

    /* Each item (contains header and content ul) */
    > li {
      display: flex; /* Horizontal layout for header and content */
      flex-direction: row;
      position: relative; /* For z-index stacking */
      flex: 0 0 auto; /* Don't grow/shrink, use natural size */

      /* Header shapes (header inside li) */
      > :first-child {
        /* Dimensions */
        width: var(--header-width);

        /* Styling */
        background-color: var(--bg);
        color: var(--fg);

        /* Layout */
        display: flex;
        align-items: center; /* Center text vertically */
        justify-content: center; /* Center text horizontally */
        position: relative;
        z-index: 2; /* Above content boxes for proper overlap */
      }

      /* Content boxes (ul inside li) */
      > ul,
      > ol,
      > img,
      > div {
        box-sizing: border-box;
        list-style: revert;

        background-color: var(--bg-alt);
        color: var(--fg-alt);

        /* Layout */
        flex: 1; /* Expand to fill remaining width */
        position: relative;
        z-index: 1; /* Below headers */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
     }
    }
  }
}