{"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n  border-radius: var(--default-border-radius);\n  color: var(--text-color);\n  border: 1px solid transparent;\n  box-sizing: border-box;\n\n  &-clip {\n    overflow: hidden;\n  }\n\n  &-padding {\n    padding: 1em;\n  }\n\n  &-gaps {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-s);\n  }\n\n  &-style {\n    &-elevated {\n      background: var(--background-card-elevated, var(--background-accent-light));\n      box-shadow: var(--card-shadow);\n    }\n\n    &-outlined {\n      background: var(--background-card-outlined, transparent);\n      border-color: var(--tone-outline);\n    }\n\n    &-light {\n      background: var(--tone-light);\n    }\n  }\n\n  /* A theme may give the Neutral card a surface of its own; any other colour's tint is the point. */\n  &-neutral&-style-light {\n    background: var(--background-card-filled, var(--tone-light));\n  }\n\n  &-interactable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-hover {\n    position: relative;\n    transition:\n      transform 0.15s ease,\n      box-shadow 0.15s ease,\n      filter 0.3s ease;\n\n    /* A layer over the card's own surface, so a coloured card keeps its colour. Opacity, because\n       Chromium does not interpolate a currentcolor mix. Paints under the later Ripple wrapper. */\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: currentcolor;\n      opacity: 0;\n      transition: opacity 0.15s ease;\n      pointer-events: none;\n    }\n\n    &:hover {\n      transform: translateY(-2px);\n\n      &::before {\n        opacity: 0.05;\n      }\n    }\n  }\n}\n\n.cardHeader {\n  display: flex;\n  gap: 1em;\n  align-items: center;\n\n  &-thumbnail {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 2.5em;\n    height: 2.5em;\n    background: rgb(0 0 0 / 8%);\n    border-radius: 50%;\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    flex-shrink: 0;\n  }\n\n  &-actions {\n    display: flex;\n    gap: var(--spacing-s);\n    flex-wrap: wrap;\n    flex-shrink: 1;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  &-titles {\n    display: flex;\n    flex-flow: column;\n    flex: 1;\n    gap: 0.25em;\n    overflow: hidden;\n\n    &-main {\n      font-size: 1.125em;\n      font-weight: 600;\n      min-width: 3ch;\n      flex-shrink: 100000;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &-container {\n        display: flex;\n        align-items: center;\n        gap: var(--spacing-m);\n        justify-content: space-between;\n      }\n    }\n\n    &-sub {\n      font-weight: 300;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n/* Pulled out to the card's own edges, so these must stay twice and once .card-padding above. */\n.cardMedia {\n  width: calc(100% + 2em);\n\n  /* With `width` and `height` given, the stretched width keeps their aspect ratio, and the skeleton\n     takes the same shape. */\n  height: auto;\n  margin: 0 -1em;\n}\n\n.cardActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5em;\n}\n\n/* The lift on hover is the only motion here; the shadow and border it transitions alongside stay. */\n@media (prefers-reduced-motion: reduce) {\n  .card-hover:hover {\n    transform: none;\n  }\n}\n"],"mappings":""}