/* Chevron Smart Art CSS Library */

/* Main container */
.sm-chevron {
  --width: 200px; /* Width of each header */
  --height: 60px; /* Height of headers */
  --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 */
  --tip-width: 30px; /* Width of pointed tips on chevrons */

  > ul,
  > ol {
    list-style: none; /* Remove default list styling */
    display: flex; /* Horizontal layout for items */
    align-items: stretch; /* Make all items same height */
    margin: 0 auto; /* Center the list */
    gap: var(--gap);

    /* Each item (contains header and content ul) */
    > li {
      display: flex; /* Vertical layout for header and content */
      flex-direction: column;
      position: relative; /* For z-index stacking */
      flex: 0 0 auto; /* Don't grow/shrink, use natural size */
      margin-left: calc(-1 * var(--tip-width)); /* Move left so tip touches previous item's tip */

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

        /* 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 */

        /* Create chevron shape with both left and right arrows */
        clip-path: polygon(
          0 0,
          /* Top left */ calc(100% - var(--tip-width)) 0,
          /* Top right before tip */ 100% 50%,
          /* Right tip point */ calc(100% - var(--tip-width)) 100%,
          /* Bottom right before tip */ 0 100%,
          /* Bottom left */ var(--tip-width) 50% /* Left tip point */
        );
      }

      /* 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);

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

        /* Dimensions and positioning */
        width: calc(var(--width) - var(--tip-width));
      }

      /* Last chevron - has both left and right arrows */
      &:last-child {
        > :first-child {
          /* Keep full chevron shape with both tips */
          clip-path: polygon(
            0 0,
            /* Top left */ calc(100% - var(--tip-width)) 0,
            /* Top right before tip */ 100% 50%,
            /* Right tip point */ calc(100% - var(--tip-width)) 100%,
            /* Bottom right before tip */ 0 100%,
            /* Bottom left */ var(--tip-width) 50% /* Left tip point */
          );
        }
      }

      /* First chevron - no left arrow tip */
      &:first-child {
        margin-left: 0; /* No previous tip to overlap into, so start normally */

        > :first-child {
          /* Remove left arrow by starting clip-path at left edge */
          clip-path: polygon(
            0 0,
            /* Top left */ calc(100% - var(--tip-width)) 0,
            /* Top right before tip */ 100% 50%,
            /* Right tip point */ calc(100% - var(--tip-width)) 100%,
            /* Bottom right before tip */ 0 100% /* Bottom left */
          );

          /* Center first heading since there's no left tip */
          box-sizing: border-box;
          padding-right: var(--tip-width);
        }

        /* First rectangle is smaller - no left arrow tip*/
        > ul,
        > ol {
          width: calc(var(--width) - var(--tip-width));
        }
      }
    }
  }
}