@postenbring/hedwig-css/dist/button.css.map

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

{"version":3,"sourceRoot":null,"mappings":"AAEA,u1BAgCE,8OAQE,qIAKA,0FAIA,4FAIA,yHAIE,kFAMJ,iNAME,qIAKA,0FAIA,4FAIA,2HAIE,kFAUJ,wCAKE,6BAA0B,gDAS5B,kEASA,uNAME,8HAKA,iIAKA,sOAQF,sMAME,6MAOA,kOAOA,qNAQF,gLAME,4MAOA,iOAOA,+LASF,wIAKE,0GAKA,qHAKA,+IAKE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/button.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-button {\n  --hds-component-button-border-width: 1px;\n  --hds-component-button-height-large: 58px;\n  --hds-component-button-height-small: 44px;\n  --hds-component-button-icon-size-large: 24px;\n  --hds-component-button-icon-size-small: 20px;\n\n  -webkit-font-smoothing: antialiased;\n  appearance: button;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--hds-spacing-12);\n  border-style: solid;\n  border-radius: var(--hds-border-radius-8);\n  border-width: var(--hds-component-button-border-width);\n  transition-duration: var(--hds-micro-animation-duration-quick);\n  transition-timing-function: var(--hds-micro-animation-easing-normal);\n  transition-property: color, background-color, border-color, fill, outline;\n  cursor: pointer;\n  word-break: normal;\n  font: var(--hds-typography-body-small-title);\n  align-items: center;\n  justify-content: center;\n\n  /* When used as a link (<a>) */\n  text-decoration: none;\n  text-align: center;\n  outline-offset: 2px;\n\n  /**\n   * Modifiers: sizes\n   */\n  &.hds-button--small {\n    font-size: var(--hds-font-size-technical-title-max);\n    line-height: var(--hds-line-height-technical-title-max);\n    padding: var(--hds-spacing-8) var(--hds-spacing-16);\n\n    /* The height can be more if the text inside the button wraps */\n    min-height: var(--hds-component-button-height-small);\n\n    & * {\n      width: var(--hds-component-button-icon-size-small);\n      height: var(--hds-component-button-icon-size-small);\n    }\n\n    &.hds-button--leading-icon {\n      padding-left: var(--hds-spacing-12);\n    }\n\n    &.hds-button--trailing-icon {\n      padding-right: var(--hds-spacing-12);\n    }\n\n    &.hds-button--only-icon {\n      padding-left: var(--hds-spacing-8);\n      padding-right: var(--hds-spacing-8);\n\n      & * {\n        width: var(--hds-spacing-24);\n      }\n    }\n  }\n\n  &.hds-button--large {\n    min-height: var(--hds-component-button-height-large);\n    font-size: var(--hds-font-size-body);\n    line-height: var(--hds-line-height-body);\n    padding: var(--hds-spacing-12) var(--hds-spacing-20);\n\n    & * {\n      height: var(--hds-component-button-icon-size-large);\n      width: var(--hds-component-button-icon-size-large);\n    }\n\n    &.hds-button--leading-icon {\n      padding-left: var(--hds-spacing-16);\n    }\n\n    &.hds-button--trailing-icon {\n      padding-right: var(--hds-spacing-16);\n    }\n\n    &.hds-button--only-icon {\n      padding-left: var(--hds-spacing-12);\n      padding-right: var(--hds-spacing-12);\n\n      & * {\n        width: var(--hds-spacing-32);\n      }\n    }\n  }\n\n  /**\n   * Modifiers: Width\n   */\n\n  &.hds-button--full {\n    width: 100%;\n  }\n\n  &.hds-button--mobile-full {\n    @media (--before-medium) {\n      width: 100%;\n    }\n  }\n\n  /**\n   * Disabled\n   */\n\n  &:disabled {\n    opacity: var(--hds-opacity-50);\n    cursor: default;\n  }\n\n  /**\n   * Modifiers: Variants\n   */\n\n  &.hds-button--primary {\n    color: var(--hds-colors-base-contrast-default);\n    fill: var(--hds-colors-base-contrast-default);\n    background-color: var(--hds-colors-base-default);\n    border-color: var(--hds-colors-base-default);\n\n    &:hover {\n      background-color: var(--hds-colors-base-hover);\n      border-color: var(--hds-colors-base-hover);\n    }\n\n    &:active {\n      background-color: var(--hds-colors-base-active);\n      border-color: var(--hds-colors-base-active);\n    }\n\n    &:disabled:hover {\n      color: var(--hds-colors-base-contrast-default);\n      fill: var(--hds-colors-base-contrast-default);\n      background-color: var(--hds-colors-base-default);\n      border-color: var(--hds-colors-base-default);\n    }\n  }\n\n  &.hds-button--secondary {\n    color: var(--hds-colors-neutral-text-default);\n    fill: var(--hds-colors-neutral-text-default);\n    background-color: transparent;\n    border-color: var(--hds-colors-border-default);\n\n    &:hover {\n      color: var(--hds-colors-text-subtle);\n      fill: var(--hds-colors-text-subtle);\n      background-color: var(--hds-colors-surface-hover);\n      border-color: var(--hds-colors-border-strong);\n    }\n\n    &:active {\n      color: var(--hds-colors-neutral-text-default);\n      fill: var(--hds-colors-neutral-text-default);\n      background-color: var(--hds-colors-surface-active);\n      border-color: var(--hds-colors-border-default);\n    }\n\n    &:disabled:hover {\n      color: var(--hds-colors-neutral-text-default);\n      fill: var(--hds-colors-neutral-text-default);\n      background-color: transparent;\n      border-color: var(--hds-colors-border-default);\n    }\n  }\n\n  &.hds-button--tertiary {\n    color: var(--hds-colors-neutral-text-default);\n    fill: var(--hds-colors-neutral-text-default);\n    background-color: transparent;\n    border-color: transparent;\n\n    &:hover {\n      color: var(--hds-colors-text-subtle);\n      fill: var(--hds-colors-text-subtle);\n      background-color: var(--hds-colors-surface-hover);\n      border-color: var(--hds-colors-surface-hover);\n    }\n\n    &:active {\n      color: var(--hds-colors-neutral-text-default);\n      fill: var(--hds-colors-neutral-text-default);\n      background-color: var(--hds-colors-surface-active);\n      border-color: var(--hds-colors-surface-active);\n    }\n\n    &:disabled:hover {\n      color: var(--hds-colors-neutral-text-default);\n      fill: var(--hds-colors-neutral-text-default);\n      background-color: transparent;\n      border-color: transparent;\n    }\n  }\n\n  /** @deprecated **/\n  &.hds-button--inverted {\n    background-color: transparent;\n    border-color: var(--hds-colors-signature);\n    color: var(--hds-ui-colors-white);\n\n    &:hover {\n      color: var(--hds-colors-light);\n      border-color: var(--hds-colors-light);\n    }\n\n    &:active {\n      color: var(--hds-button-colors-text);\n      border-color: var(--hds-colors-signature);\n    }\n\n    &:disabled {\n      opacity: var(--hds-opacity-50);\n      color: var(--hds-ui-colors-grey);\n      border-color: var(--hds-ui-colors-grey);\n\n      &:hover {\n        color: var(--hds-ui-colors-grey);\n        border-color: var(--hds-ui-colors-grey);\n      }\n    }\n  }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}