{"version":3,"file":"breadcrumb.module.mjs","names":[],"sources":["../../../../package/common/breadcrumb/breadcrumb.module.pcss"],"sourcesContent":[".breadcrumb {\n  font-family: var(--default-font);\n  font-size: var(--default-font-size);\n\n  &-list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  &-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  &-icon {\n    margin-right: 6px;\n    font-size: 0.9em;\n  }\n\n  &-link {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    transition: color 0.15s;\n\n    /* Explicit :link/:visited beats the browser default a:visited { color: purple } on\n       specificity, otherwise every crumb using the same href (e.g. \"#\") turns purple as\n       soon as any one of them is clicked. */\n    &:link,\n    &:visited {\n      color: var(--text-dark);\n    }\n\n    &:hover {\n      color: var(--primary-color);\n    }\n\n    &-disabled {\n      color: var(--text-dark);\n      opacity: 0.5;\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  &-current {\n    display: flex;\n    align-items: center;\n    color: var(--text-color);\n    font-weight: var(--header-font-weight, 600);\n  }\n\n  &-separator {\n    display: flex;\n    align-items: center;\n    color: var(--text-dark);\n    font-size: 0.75em;\n    opacity: 0.7;\n  }\n\n  /* Two classes, to outrank Button's font-size and ActionIcon's box whichever stylesheet loads\n     first. */\n  & &-ellipsis {\n    width: 1.8em;\n    height: 1.8em;\n    font-size: 1em;\n\n    &:hover {\n      color: var(--primary-color);\n    }\n  }\n\n  /* The popover panel pads free content; this list pads its own rows instead, so\n     that a row's hover highlight reaches the panel edge. */\n  &-hiddenPanel {\n    padding: 0;\n  }\n\n  &-hiddenList {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin: 0;\n    padding: 6px;\n    list-style: none;\n    min-width: 160px;\n  }\n\n  &-hiddenItem {\n    display: flex;\n\n    .breadcrumb-link {\n      width: 100%;\n      padding: 6px 8px;\n      border-radius: var(--default-border-radius);\n\n      /* `:focus` as well, because the panel takes the focus when the keyboard\n         opens it. Not `--background-accent-light`: it is the same colour as that\n         panel in the default theme. */\n      &:hover,\n      &:focus {\n        background: var(--background-accent);\n      }\n    }\n  }\n}\n"],"mappings":""}