{"version":3,"file":"fabBase.module.mjs","names":[],"sources":["../../../../../../package/common/fab/components/fabBase/fabBase.module.pcss"],"sourcesContent":[".fab {\n  /* Deliberately not tied to --default-font-size: a FAB is a touch target holding an icon,\n     sized by fingers rather than by reading comfort, and it floats over the content — scaling\n     it with the text scale would only occlude more of the page. Set these to couple them if\n     that is what you want. */\n  --custom-fab-size: var(--fab-size, 56px);\n  --custom-fab-mini-size: var(--fab-mini-size, 40px);\n  --custom-fab-icon-size: var(--fab-icon-size, 18px);\n\n  width: var(--custom-fab-size);\n  height: var(--custom-fab-size);\n  border-radius: 50%;\n  display: flex;\n  align-items: stretch;\n  padding: 0;\n\n  /* Make the Ripple wrapper fill the full circular button */\n  & > div {\n    width: 100%;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &-content {\n    width: var(--custom-fab-icon-size);\n    height: var(--custom-fab-icon-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n      /* !important: the published stylesheet is wrapped in @layer, so an unlayered\n         consumer rule (e.g. FontAwesome's own .svg-inline--fa width/height) would\n         otherwise win regardless of specificity and break this icon's square sizing. */\n      width: var(--custom-fab-icon-size) !important;\n      height: var(--custom-fab-icon-size) !important;\n    }\n\n    &-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n\n  &-size {\n    &-mini {\n      width: var(--custom-fab-mini-size);\n      height: var(--custom-fab-mini-size);\n      background: var(--background-accent-light);\n    }\n  }\n}\n"],"mappings":""}