{"version":3,"file":"IconButton.module.cjs","names":[],"sources":["../../../../src/components/Button/IconButton/IconButton.module.css"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.icon-button {\n  --cpd-icon-button-indicator-border-size: calc(\n    var(--cpd-icon-button-size) * 0.0625\n  );\n\n  inline-size: var(--cpd-icon-button-size);\n  block-size: var(--cpd-icon-button-size);\n\n  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */\n  padding: calc(var(--cpd-icon-button-size) * 0.125);\n  aspect-ratio: 1 / 1;\n  border: 0;\n  appearance: none;\n  cursor: pointer;\n  border-radius: 50%;\n  position: relative;\n  background: transparent;\n  line-height: 0px;\n}\n\n.icon-button[data-kind=\"primary\"] {\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.icon-button[data-kind=\"secondary\"] {\n  background: var(--cpd-color-bg-subtle-secondary);\n\n  * {\n    color: var(--cpd-color-icon-secondary);\n  }\n}\n\n.no-background[data-kind=\"secondary\"] {\n  background: transparent;\n}\n\n.icon-button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n\n  * {\n    color: var(--cpd-color-icon-disabled);\n  }\n}\n\n/**\n * Hover state\n */\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]):hover {\n    background: var(--cpd-color-bg-subtle-primary);\n\n    * {\n      color: var(--cpd-color-icon-primary);\n    }\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]):active {\n  background: var(--cpd-color-bg-subtle-primary);\n\n  * {\n    color: var(--cpd-color-icon-primary);\n  }\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:hover)::before {\n    /* Same colour as the background */\n    border: var(--cpd-icon-button-indicator-border-size) solid\n      var(--cpd-color-bg-subtle-primary);\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"])[data-indicator]:is(:active)::before {\n  /* Same colour as the background */\n  border: var(--cpd-icon-button-indicator-border-size) solid\n    var(--cpd-color-bg-subtle-primary);\n  inset-block-start: 0;\n  inset-inline-end: 0;\n}\n\n@media (hover) {\n  .icon-button:not([aria-disabled=\"true\"]).destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle-hovered);\n    outline: 1px solid var(--cpd-color-border-critical-subtle);\n  }\n}\n\n.icon-button:not([aria-disabled=\"true\"]).destructive {\n  * {\n    color: var(--cpd-color-icon-critical-primary);\n  }\n}\n"],"mappings":""}