{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":["/*\nCopyright 2023, 2024 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.button {\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  font: var(--cpd-font-body-md-semibold);\n  transition-duration: 0.1s;\n  transition-property: color, background-color, border-color;\n}\n\na.button {\n  /* Make the width match that of a real button */\n  inline-size: max-content;\n\n  /* Buttons should not be underlined */\n  text-decoration: none;\n}\n\n.button > svg {\n  transition: color 0.1s;\n}\n\n.button[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled) !important;\n}\n\n.button[aria-disabled=\"true\"] > svg {\n  color: var(--cpd-color-icon-disabled) !important;\n}\n\n/**\n * SIZES\n */\n\n.button[data-size=\"lg\"] {\n  padding-block: var(--cpd-space-2x);\n  padding-inline: var(--cpd-space-8x);\n  min-block-size: var(--cpd-space-12x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-2x);\n    block-size: var(--cpd-space-12x);\n    inline-size: var(--cpd-space-12x);\n  }\n}\n\n.button[data-size=\"lg\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-7x);\n}\n\n.button[data-size=\"sm\"] {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-5x);\n  min-block-size: var(--cpd-space-9x);\n\n  &.icon-only {\n    padding-inline: var(--cpd-space-1x);\n    block-size: var(--cpd-space-9x);\n    inline-size: var(--cpd-space-9x);\n  }\n}\n\n.button[data-size=\"sm\"].has-icon:not(.icon-only) {\n  padding-inline-start: var(--cpd-space-4x);\n}\n\n/**\n * KINDS\n */\n\n.button[data-kind=\"primary\"] {\n  color: var(--cpd-color-text-on-solid-primary);\n  background: var(--cpd-color-bg-action-primary-rest);\n  border-width: 0;\n}\n\n.button[data-kind=\"primary\"] > svg {\n  color: var(--cpd-color-icon-on-solid-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"]:hover {\n    background: var(--cpd-color-bg-action-primary-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"]:active,\n.button[data-kind=\"primary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-action-primary-pressed);\n}\n\n.button[data-kind=\"primary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive background */\n  background: var(--cpd-color-bg-subtle-primary) !important;\n}\n\n.button[data-kind=\"primary\"].destructive {\n  background: var(--cpd-color-bg-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"primary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-hovered);\n  }\n}\n\n.button[data-kind=\"primary\"].destructive:active,\n.button[data-kind=\"primary\"].destructive[aria-expanded=\"true\"] {\n  /* TODO: We're waiting for this value to be formalized as a semantic token */\n  background: var(--cpd-color-red-1100);\n}\n\n.button[data-kind=\"secondary\"] {\n  border: 1px solid var(--cpd-color-border-interactive-secondary);\n  color: var(--cpd-color-text-primary);\n  background: var(--cpd-color-bg-canvas-default);\n}\n\n.button[data-kind=\"secondary\"] > svg {\n  color: var(--cpd-color-icon-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"]:hover {\n    border-color: var(--cpd-color-border-interactive-hovered);\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"secondary\"]:active,\n.button[data-kind=\"secondary\"][aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-interactive-hovered);\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"secondary\"][aria-disabled=\"true\"] {\n  /* !important to override destructive values */\n  border-color: var(--cpd-color-border-interactive-secondary) !important;\n  background: var(--cpd-color-bg-subtle-secondary) !important;\n}\n\n.button[data-kind=\"secondary\"].destructive {\n  border-color: var(--cpd-color-border-critical-subtle);\n  color: var(--cpd-color-text-critical-primary);\n}\n\n.button[data-kind=\"secondary\"].destructive > svg {\n  color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"secondary\"].destructive:hover {\n    border-color: var(--cpd-color-border-critical-hovered);\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"secondary\"].destructive:active,\n.button[data-kind=\"secondary\"].destructive[aria-expanded=\"true\"] {\n  border-color: var(--cpd-color-border-critical-hovered);\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n.button[data-kind=\"tertiary\"] {\n  border: none;\n  color: var(--cpd-color-text-primary);\n  text-decoration: underline;\n  background: transparent;\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"]:hover {\n    background: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.button[data-kind=\"tertiary\"]:active,\n.button[data-kind=\"tertiary\"][aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-subtle-primary);\n}\n\n.button[data-kind=\"tertiary\"][aria-disabled=\"true\"] {\n  color: var(--cpd-color-text-disabled);\n\n  /* !important to override destructive background */\n  background: transparent !important;\n}\n\n.button[data-kind=\"tertiary\"].destructive {\n  color: var(--cpd-color-text-critical-primary);\n}\n\n@media (hover) {\n  .button[data-kind=\"tertiary\"].destructive:hover {\n    background: var(--cpd-color-bg-critical-subtle);\n  }\n}\n\n.button[data-kind=\"tertiary\"].destructive:active,\n.button[data-kind=\"tertiary\"].destructive[aria-expanded=\"true\"] {\n  background: var(--cpd-color-bg-critical-subtle-hovered);\n}\n\n@media (forced-colors: active) {\n  .button[data-kind=\"primary\"] {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}