{"version":3,"file":"sectionHeader.module.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.module.pcss"],"sourcesContent":[".sectionHeader {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-m, 16px);\n  align-items: center;\n  color: var(--text-color);\n\n  &-leading {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: var(--section-header-leading-size);\n    height: var(--section-header-leading-size);\n    color: var(--primary-color);\n    background: var(--background-accent);\n    border-radius: var(--default-border-radius);\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    flex-shrink: 0;\n    font-size: calc(var(--section-header-leading-size) * 0.5);\n  }\n\n  /* Leading icon/thumbnail + titles form one unbreakable flex item. Without the\n     wrapper they're siblings on the wrapping root, and since flex breaks lines by\n     hypothetical size (flex-basis: auto = content width) rather than the shrunk\n     size, a long title drops to its own row and orphans the icon above it. */\n  &-identity {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-m, 16px);\n    flex: 0 1 auto;\n    min-width: 0;\n  }\n\n  &-titles {\n    display: flex;\n    flex-flow: column;\n    flex: 0 1 auto;\n    gap: 2px;\n    min-width: 0;\n  }\n\n  &-title {\n    margin: 0;\n    font-size: var(--section-header-title-size);\n    font-weight: var(--header-font-weight, 600);\n    line-height: 1.2;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &-subtitle {\n    color: var(--text-dark);\n    font-weight: 300;\n    font-size: var(--section-header-subtitle-size);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  &-trailing {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--spacing-m, 16px);\n    flex: 1 1 auto;\n  }\n\n  &-left {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  &-center {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  &-actions {\n    display: flex;\n    gap: var(--spacing-s, 8px);\n    flex-wrap: wrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  &-divider {\n    margin-top: var(--spacing-s, 8px);\n  }\n\n  &-size {\n    &-small {\n      --section-header-title-size: var(--header-small-font-size, 16px);\n      --section-header-subtitle-size: 12px;\n      --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n    }\n\n    &-medium {\n      --section-header-title-size: var(--header-medium-font-size, 18px);\n      --section-header-subtitle-size: 14px;\n      --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n    }\n\n    &-large {\n      --section-header-title-size: var(--header-font-size, 24px);\n      --section-header-subtitle-size: 15px;\n      --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n    }\n  }\n}\n\n@media (width <= 640px) {\n  .sectionHeader-center:not(:empty) {\n    flex: 1 1 100%;\n  }\n}\n"],"mappings":""}