{"version":3,"file":"tabHeader.module.mjs","names":[],"sources":["../../../../package/common/tabHeader/tabHeader.module.pcss"],"sourcesContent":[".tabHeader {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  border-bottom: 1px solid var(--border-color);\n  user-select: none;\n\n  /* The y value is not redundant: overflow-x: auto alone computes overflow-y to auto, so any\n     vertical overflow, such as a flex column squeezing the strip, let the tabs scroll up and down. */\n  overflow: auto hidden;\n\n  &-tab {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    color: var(--text-dark);\n    border-bottom: 2px solid transparent;\n    border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    transition:\n      color 0.2s,\n      background 0.2s,\n      border-color 0.2s;\n    white-space: nowrap;\n\n    &:hover {\n      /* Longhand, not the shorthand: hover beats -active on specificity, and the shorthand\n         would reset the active tab's gradient indicator away while the pointer is over it. */\n      background-color: var(--background-accent-light);\n      color: var(--text-color);\n    }\n\n    &-active {\n      color: var(--primary-color);\n      border-bottom-color: var(--primary-color);\n\n      /* Paints the gradient exactly over border-bottom, which a background layer only reaches\n         because its origin is the border box. The border stays as the no-gradient fallback. */\n      background-image: var(--primary-gradient, none);\n      background-repeat: no-repeat;\n      background-size: 100% 2px;\n      background-position: bottom;\n      background-origin: border-box;\n\n      &:hover {\n        color: var(--primary-color);\n      }\n    }\n\n    &-disabled {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: default;\n    }\n  }\n\n  &-icon {\n    font-size: 18px;\n    flex-shrink: 0;\n  }\n\n  &-labels {\n    display: flex;\n    flex-direction: column;\n    text-align: left;\n    line-height: 1.25;\n  }\n\n  &-title {\n    font-weight: var(--header-font-weight, 600);\n    font-size: var(--default-font-size);\n  }\n\n  &-subtitle {\n    font-size: var(--text-small-font-size);\n    color: var(--text-dark);\n  }\n}\n\n@media (width <= 640px) {\n  .tabHeader-tab:not(.tabHeader-tab-active) .tabHeader-labels {\n    display: none;\n  }\n}\n"],"mappings":""}