{"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n     (per instance) to override; unset ones fall back to the values below. */\n  --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n  --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n  --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n  --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n  --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n  --custom-timeline-gap: var(--timeline-gap, 16px);\n  --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n  --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n  display: flex;\n  flex-direction: column;\n  color: var(--text-color);\n\n  &-item {\n    display: flex;\n    gap: var(--custom-timeline-gap);\n    border-radius: var(--default-border-radius);\n\n    &:last-child &-connector {\n      display: none;\n    }\n  }\n\n  &-item-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color 0.15s ease;\n    margin: 0 -10px;\n    padding: 0 10px;\n\n    &:hover {\n      background-color: var(--background-accent-light);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  &-item-disabled {\n    opacity: 0.5;\n  }\n\n  &-marker {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  &-dot {\n    width: var(--custom-timeline-dot-size);\n    height: var(--custom-timeline-dot-size);\n    border-radius: 50%;\n    background-color: var(--custom-timeline-dot-color);\n    box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n    flex-shrink: 0;\n  }\n\n  /* Set by the component whenever the item has an icon — not inferred from the\n     rendered markup (`:has(svg)`), which would miss a custom icon element that\n     isn't an <svg>, e.g. an <img>. */\n  &-dot-with-icon {\n    width: var(--custom-timeline-icon-dot-size);\n    height: var(--custom-timeline-icon-dot-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-on-primary);\n    font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n  }\n\n  /* After -dot-with-icon, which it ties on specificity: a coloured dot's icon reads on its colour. */\n  &-dot-toned {\n    background-color: var(--tone);\n    color: var(--tone-contrast);\n  }\n\n  /* Neutral's --tone is its contrast colour too, so an icon needs the see-through fill behind it. */\n  &-dot-toned&-dot-with-icon {\n    background-color: var(--tone-fill);\n  }\n\n  /* Set by the component when ANY item has an icon. Every marker is then as wide as the\n     widest dot it could hold, so the connectors line up into one vertical spine and every\n     content column starts at the same x. max(), because a consumer is free to set the icon\n     dot smaller than the plain one. */\n  &-with-icons &-marker {\n    width: max(var(--custom-timeline-dot-size), var(--custom-timeline-icon-dot-size));\n  }\n\n  &-connector {\n    flex: 1 1 auto;\n    width: var(--custom-timeline-line-thickness);\n    min-height: 12px;\n    background-color: var(--custom-timeline-line-color);\n    margin: 4px 0;\n  }\n\n  &-content {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-bottom: var(--custom-timeline-item-gap);\n  }\n\n  &-header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  &-title {\n    font-weight: 600;\n    color: var(--text-color);\n  }\n\n  &-timestamp {\n    flex-shrink: 0;\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n    white-space: nowrap;\n  }\n\n  &-description {\n    color: var(--text-dark);\n    margin-top: 2px;\n  }\n\n  /* Right: markers + line on the right, content on the left */\n  &-right &-item {\n    flex-direction: row-reverse;\n    text-align: right;\n  }\n\n  &-right &-header {\n    flex-direction: row-reverse;\n  }\n\n  /* Alternate: two-column layout, entries alternating left/right of a centered line */\n  &-alternate &-item {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: start;\n    gap: var(--custom-timeline-gap);\n  }\n\n  &-alternate &-marker {\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  &-alternate &-content {\n    grid-column: 1;\n    grid-row: 1;\n    text-align: right;\n  }\n\n  &-alternate &-header {\n    flex-direction: row-reverse;\n  }\n\n  &-alternate &-item-right &-content {\n    grid-column: 3;\n    text-align: left;\n  }\n\n  &-alternate &-item-right &-header {\n    flex-direction: row;\n  }\n}\n"],"mappings":""}