{"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  font-size: var(--default-font-size);\n  background: transparent;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: var(--default-font);\n  border-radius: var(--default-border-radius);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  min-width: min-content;\n\n  /* Hover and press layer in currentcolor, so one rule fits every style. On the root, which a\n     stretched button's inner element would not fill; under the Ripple wrapper, which comes later. */\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  /* What a <button> gets from the browser and an <a> does not. Before the sizes, so Icon's\n     inline-flex wins the specificity tie. A grid, not inline-block: an inline-block that hides\n     its overflow takes its bottom edge as its baseline and sits higher than a <button> beside it.\n     align-content centres the label in a height set from outside, as a <button> does. */\n  &-link {\n    display: inline-grid;\n    align-content: center;\n    font-style: normal;\n    font-weight: normal;\n    letter-spacing: normal;\n    line-height: normal;\n    text-align: center;\n    text-decoration: none;\n    text-indent: 0;\n    text-shadow: none;\n    text-transform: none;\n    word-spacing: normal;\n  }\n\n  &-notAllowed {\n    cursor: not-allowed;\n  }\n\n  /* Disabled only, not loading: a faded spinner would read as disabled rather than working. */\n  &-disabled {\n    opacity: 0.5;\n  }\n\n  /* Inside the edge: outside, a ButtonGroup neighbour with the same fill swallows the ring. A\n     Filled button draws it in its text colour instead, as Pagination's active item does. */\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -4px;\n  }\n\n  /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n  @media (hover: hover) {\n    &:hover:not(:disabled, [aria-disabled='true'])::before {\n      opacity: 0.08;\n    }\n  }\n\n  /* After the hover rule, which it ties on specificity: a press is a hover too. */\n  &:active:not(:disabled, [aria-disabled='true'])::before {\n    opacity: 0.16;\n  }\n\n  &-content {\n    position: relative;\n    white-space: break-spaces;\n  }\n\n  &-loading {\n    visibility: hidden;\n\n    &-container {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &-withIcon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n  }\n\n  /* A pill, because plain text right after the label reads as part of it. On the label's\n     baseline rather than centred, so it follows the label wherever the font puts it. */\n  &-shortcut {\n    /* Not inline: Chrome trims only block containers, see the @supports below. */\n    display: inline-block;\n\n    /* Negative margins cancel the vertical padding in layout, so the button is no taller. */\n    margin: -0.2em 0 -0.2em 0.6em;\n    padding: 0.2em 0.6em;\n    border-radius: 99999px;\n    background: color-mix(in srgb, currentcolor 15%, transparent);\n    font-size: 0.85em;\n\n    /* Smaller text on a shared baseline sits lower. Raised so its capitals centre on the label's:\n       (1 - 0.85) / 2 x ~0.72 cap height / 0.85. */\n    vertical-align: 0.065em;\n    white-space: nowrap;\n\n    /* Even padding around the letters. Untrimmed, engines round the font's ascent and descent\n       differently at each size, and the letters sat up to 2px off-centre. */\n    @supports (text-box: trim-both cap alphabetic) {\n      margin-block: -0.4em;\n      padding-block: 0.4em;\n      text-box: trim-both cap alphabetic;\n    }\n\n    /* A touch screen usually has no keyboard to press it on. */\n    @media (pointer: coarse) {\n      display: none;\n    }\n  }\n\n  &-style {\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n\n      /* After the base :focus-visible rule, which it ties on specificity. */\n      &:focus-visible {\n        outline-color: currentcolor;\n      }\n    }\n\n    &-light {\n      background: var(--tone-light);\n      color: var(--tone-text);\n    }\n\n    &-outlined {\n      color: var(--tone-text);\n      border-color: var(--tone-outline);\n    }\n\n    &-plain {\n      color: var(--tone-text);\n    }\n  }\n\n  &-background {\n    display: block;\n    padding: 0.5em 0.75em;\n  }\n\n  /* Multiples of the theme's base, not em: an em on font-size resolves against the parent,\n     so these would follow whatever the button sits in rather than the theme. */\n  &-size {\n    &-small {\n      font-size: calc(var(--default-font-size) * 0.75);\n    }\n\n    &-medium {\n      font-size: var(--default-font-size);\n    }\n\n    &-large {\n      font-size: calc(var(--default-font-size) * 1.25);\n    }\n\n    /* Square, padding-free button for a lone icon; the caller sets the box size. */\n    &-icon {\n      display: inline-flex;\n\n      /* Inherits, unlike the other sizes: a hardcoded px value would have to be out-specified\n         from another stylesheet, a specificity tie decided only by bundle order. */\n      font-size: inherit;\n\n      .button-ripple,\n      .button-background,\n      .button-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}