{"version":3,"file":"listItem.module.mjs","names":[],"sources":["../../../../package/common/listItem/listItem.module.pcss"],"sourcesContent":["/* position: relative so the trigger's ::after can stretch over the whole row, and isolation so\n   its z-index stays inside the row instead of rising over a sticky header of the page. */\n.listItem {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-m, 8px);\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--list-item-min-height, 48px);\n  padding: var(--spacing-m, 8px);\n\n  &-icon {\n    /* FontAwesome's own rule is unlayered and outranks `width` from inside the library's layer. */\n    --fa-width: 1.25em;\n\n    flex-shrink: 0;\n  }\n\n  /* min-width: 0 lets the labels shrink, so a long title ellipses instead of pushing\n     endContent and the chevron out of the row. */\n  &-labels {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n  }\n\n  &-title {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The <a> or <button> around the title. */\n  &-trigger {\n    display: block;\n    margin: 0;\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* Over the whole row. It belongs to the link, so a middle click and a long press anywhere on\n       the row act on the link too. */\n\n    /* z-index above content that positions itself, a Chip among many, which would otherwise\n       paint over it in tree order and swallow the click. */\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      transition: background-color 0.15s;\n    }\n\n    /* A tint of the text colour, so it shows on any surface the row sits on. (hover: hover)\n       because on touch a tap latches :hover until the next tap elsewhere. */\n    @media (hover: hover) {\n      &:hover::after {\n        background-color: color-mix(in srgb, currentcolor 6%, transparent);\n      }\n    }\n\n    &:active::after {\n      background-color: color-mix(in srgb, currentcolor 12%, transparent);\n    }\n\n    /* On the stretched area, to ring the row rather than the title. Inside the edge: a row\n       usually fills a card that clips its overflow. */\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible::after {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  /* Under the trigger's hover tint, which still shows on top of it. */\n  &-selected {\n    background-color: var(--list-item-selected-background, color-mix(in srgb, var(--primary-color) 12%, transparent));\n  }\n\n  /* One line with an ellipsis, like the title. Two clamped lines cut a word too long for the line\n     off without one (an email in a narrow row), and gave the rows of a list uneven heights. */\n  &-subtitle {\n    overflow: hidden;\n    color: var(--text-dark);\n    font-size: 0.85em;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &-endContent {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    gap: var(--spacing-s, 4px);\n  }\n\n  &-chevron {\n    flex-shrink: 0;\n    color: var(--text-dark);\n    font-size: 0.85em;\n  }\n}\n\n/* Controls elsewhere in the row sit above the stretched area, so they stay clickable while the\n   text around them still opens the row. Any `a`, not `a[href]`: a disabled link Button drops its\n   href, and a click on it must not open the row. All in :where(), for no specificity at all: a\n   control's own position wins, so an input it positions absolutely stays absolute. */\n:where(.listItem-interactive)\n  :where(a, button, input, select, textarea, label, [tabindex]):where(:not(.listItem-trigger)) {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}