{"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":[".accordion {\n  color: var(--text-color);\n\n  /* Clips the header's fill and hover layer to the corners; the body clips anyway, for its height\n     transition. */\n  overflow: hidden;\n\n  /* Positioned, so a joined section paints over the one above, whose positioned header would\n     otherwise cover the seam where WebKit draws it thinner than the 1px overlap. */\n  position: relative;\n\n  &-header {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 0.75em;\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    /* The rest of the accordion measures from the header, so the base is set here. */\n    font-size: var(--default-font-size);\n\n    /* A layer in currentcolor, so it shows on a fill as on nothing: a Light header already uses\n       the background. */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: currentcolor;\n      opacity: 0;\n      transition: opacity 0.15s;\n      pointer-events: none;\n    }\n\n    /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 0.06;\n      }\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n      outline-offset: -2px;\n    }\n  }\n\n  /* Positioned, so they paint above the hover layer, which is positioned too and comes first. */\n  &-title {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n  }\n\n  &-icon {\n    /* FontAwesome's own rule is unlayered, so it outranks `width` from inside the library's layer and\n       reads this instead. `width` still sizes a custom icon. */\n    --fa-width: 1em;\n\n    position: relative;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    transition: transform 0.2s;\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    position: relative;\n    transition: height 0.2s ease;\n\n    &-inner {\n      padding: 1em;\n    }\n  }\n\n  /* --accordion-seam is the line a joined section draws where it meets the one above. */\n  &-style {\n    &-light {\n      /* The page colour: the border is the tint itself, so a seam in it would merge two tinted\n         headers into one block. */\n      --accordion-seam: var(--background);\n\n      border: 1px solid var(--tone-light);\n      border-radius: var(--default-border-radius);\n    }\n\n    &-outlined {\n      --accordion-seam: var(--tone-outline);\n\n      border: 1px solid var(--tone-outline);\n      border-radius: var(--default-border-radius);\n    }\n  }\n\n  &-style-light &-header {\n    background: var(--tone-light);\n    color: var(--tone-text);\n  }\n\n  &-style-outlined &-header,\n  &-style-plain &-header {\n    color: var(--tone-text);\n  }\n\n  /* Plain sits inside other content: no padding, so no hover layer, and the focus ring goes\n     outside the text rather than over it. */\n  &-style-plain &-header {\n    padding: 0;\n\n    &::before {\n      display: none;\n    }\n\n    &:focus-visible {\n      outline-offset: 2px;\n    }\n  }\n\n  &-style-plain &-body-inner {\n    padding: 0.375em 0 0;\n  }\n\n  & + & {\n    margin-top: 0.5em;\n  }\n\n  /* Each joined section overlaps the one above by its 1px border, and that one hides (not removes)\n     its bottom border: a 1px gap or two borders snap to different device pixels at fractional zoom.\n     Ties `& + &` on specificity, so it stays after it. Firefox before 121 lacks :has(). */\n  &-joined + &-joined {\n    margin-top: -1px;\n    border-top-color: var(--accordion-seam);\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &-style-plain&-joined + &-style-plain&-joined {\n    margin-top: 0;\n  }\n\n  &-joined:has(+ &-joined) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}