{
  "version": 3,
  "sources": ["../javascripts/styled-components/components/Button/index.tsx"],
  "sourcesContent": ["import styled, { css } from 'styled-components';\n\nimport { size } from '../../layout/helpers';\n\nconst buttonMinHeight = 6;\nconst buttonSmallMinHeight = 4.5;\n\nexport type ButtonNameTypes = 'primary' | 'secondary' | 'accent' | 'clear';\n\ninterface ButtonProps {\n  $tone?: ButtonNameTypes;\n  $size?: 'small';\n  $fullWidth?: boolean | 'mobile' | 'desktop';\n  $inline?: boolean;\n  $shadow?: boolean;\n}\n\nexport const Button = styled.button.attrs(() => ({\n  type: 'button',\n})).withConfig({ componentId: 'sc-81ou2v-0' })<ButtonProps>`\n    --button-bg: var(--c-bg-main);\n    --button-fg: var(--c-text-main);\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${size(1)};\n    width: max-content;\n    min-height: ${size(buttonMinHeight)};\n    padding: ${size(1.5)} ${size(4)};\n    margin: 0;\n    background-color: var(--button-bg);\n    color: var(--button-fg);\n    font-family: var(--font-family);\n    font-weight: var(--font-weight-medium);\n    border: 0;\n    border-radius: 100vmax;\n    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n    font-size: var(--font-size-small-static);\n    line-height: ${(props) => props.theme.font.lineHeight.thin};\n    text-align: center;\n    text-decoration: none;\n    transform-origin: 50% 50%;\n    transition: transform 200ms ease;\n    user-select: none;\n    cursor: pointer;\n\n    &::before {\n        content: \"\";\n        position: absolute;\n        inset: 1px;\n        background-color: var(--c-overlay);\n        border-radius: inherit;\n        mix-blend-mode: soft-light;\n        opacity: 0;\n        transition: opacity 200ms ease;\n    }\n\n    &:active {\n        transform: scale(0.97);\n    }\n\n    &:not([disabled]):hover {\n        &::before {\n            opacity: 1;\n        }\n    }\n\n    &[disabled] {\n        opacity: 0.37;\n        cursor: not-allowed;\n    }\n\n    ${({ $tone }) =>\n      $tone === 'primary'\n        ? css`\n                  --button-bg: var(--c-primary-bg);\n                  --button-fg: var(--c-primary-fg);\n              `\n        : $tone === 'secondary'\n          ? css`\n                  --button-bg: var(--c-secondary-bg);\n                  --button-fg: var(--c-secondary-fg);\n              `\n          : $tone === 'accent'\n            ? css`\n                  --button-bg: var(--c-accent-bg);\n                  --button-fg: var(--c-accent-fg);\n              `\n            : $tone === 'clear'\n              ? css`\n                  --button-bg: transparent;\n                  --button-fg: var(--c-primary-bg);\n\n                  // Disable hover overlay due to bug with mix-blend-mode and transparent background\n                  &::before {\n                      content: none;\n                  }\n              `\n              : css`\n                  // Disable hover overlay due to bug with mix-blend-mode and transparent background\n                  &::before {\n                      content: none;\n                  }\n              `}\n\n    ${({ $size }) =>\n      $size === 'small'\n        ? css`\n                  min-height: ${size(buttonSmallMinHeight)};\n                  padding: ${size(1)} ${size(2)};\n              `\n        : undefined}\n\n  ${({ $fullWidth, theme }) =>\n    $fullWidth && typeof $fullWidth === 'boolean'\n      ? css`\n                  width: 100%;\n              `\n      : $fullWidth === 'mobile'\n        ? css`\n                  ${theme.breakpoint.LtMd} {\n                      width: 100%;\n                  }\n              `\n        : $fullWidth === 'desktop'\n          ? css`\n                  ${theme.breakpoint.Md} {\n                      width: 100%;\n                  }\n              `\n          : null}\n\n  ${({ $inline }) =>\n    $inline &&\n    css`\n            display: inline-flex;\n        `}\n\n  ${({ $shadow }) =>\n    $shadow &&\n    css`\n            box-shadow: var(--drop-shadow);\n        `}\n`;\n"],
  "mappings": "6DAIA,IAAMA,EAAkB,EAClBC,EAAuB,IAYhBC,EAASC,EAAO,OAAO,MAAM,KAAO,CAC/C,KAAM,QACR,EAAE,EAAE,WAAW,CAAE,YAAa,aAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQlCC,EAAK,CAAC,CAAC;AAAA;AAAA,kBAEAA,EAAKJ,CAAe,CAAC;AAAA,eACxBI,EAAK,GAAG,CAAC,IAAIA,EAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAUfC,GAAUA,EAAM,MAAM,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkCxD,CAAC,CAAE,MAAAC,CAAM,IACTA,IAAU,UACNC;AAAA;AAAA;AAAA,gBAIAD,IAAU,YACRC;AAAA;AAAA;AAAA,gBAIAD,IAAU,SACRC;AAAA;AAAA;AAAA,gBAIAD,IAAU,QACRC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAKD;AAAA;AAAA,MAET,CAAC,CAAE,MAAAC,CAAM,IACTA,IAAU,QACND;AAAA,gCACsBH,EAAKH,CAAoB,CAAC;AAAA,6BAC7BG,EAAK,CAAC,CAAC,IAAIA,EAAK,CAAC,CAAC;AAAA,gBAErC,MAAS;AAAA;AAAA,IAEf,CAAC,CAAE,WAAAK,EAAY,MAAAC,CAAM,IACrBD,GAAc,OAAOA,GAAe,UAChCF;AAAA;AAAA,gBAGAE,IAAe,SACbF;AAAA,oBACUG,EAAM,WAAW,IAAI;AAAA;AAAA;AAAA,gBAI/BD,IAAe,UACbF;AAAA,oBACQG,EAAM,WAAW,EAAE;AAAA;AAAA;AAAA,gBAI3B,IAAI;AAAA;AAAA,IAEZ,CAAC,CAAE,QAAAC,CAAQ,IACXA,GACAJ;AAAA;AAAA,SAEK;AAAA;AAAA,IAEL,CAAC,CAAE,QAAAK,CAAQ,IACXA,GACAL;AAAA;AAAA,SAEK;",
  "names": ["buttonMinHeight", "buttonSmallMinHeight", "Button", "dt", "size", "props", "$tone", "lt", "$size", "$fullWidth", "theme", "$inline", "$shadow"]
}