{"version":3,"sources":["../src/marketing/src/marketing/buttons/button.scss","../src/marketing/src/marketing/support/mixins.scss","../src/marketing/src/support/variables/typography.scss","../src/marketing/src/marketing/support/variables.scss"],"names":[],"mappings":"AAAA,UACE,iBAAkB,CAClB,SAAU,CACV,oBAAqB,CACrB,kCAA2B,CAA3B,0BAA2B,CAE3B,2BCwEiC,CDtEjC,cAAe,CACf,eEcoB,CFbpB,aAAc,CACd,kBAAmB,CACnB,qBAAsB,CACtB,wBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,QAAS,CAET,qBC8DiC,CA7EjC,6BDkByB,CCjBzB,wBEOyB,CFNzB,mEAA6D,CAE7D,kBACE,mEAA8D,CAC/D,qHAQC,wBENuB,CFOvB,mEAA6D,CAC9D,gCAIC,SAAU,CACV,2CEbuB,CFcxB,sEAKC,mBAAoB,CACpB,cAAe,CACf,WAAY,CACb,kBDJC,qCAAsC,CACtC,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,UAAW,CACX,UAAW,CAEX,qBC0C+B,CDzC/B,SAAU,CACV,uBAAwB,CAtC5B,gBA0CI,oBAAqB,CA1CzB,wBA6CM,SAAU,CACV,uBAAwB,CACzB,kBC9CH,6BDoDyB,CCnDzB,wBES0B,CFR1B,mEAA6D,CAE7D,0BACE,mEAA8D,CAC/D,qKAQC,wBEJwB,CFKxB,mEAA6D,CAC9D,gDAIC,SAAU,CACV,0CEXwB,CFYzB,8FAKC,mBAAoB,CACpB,cAAe,CACf,WAAY,CACb,iBA9BD,6BD8DyB,CC7DzB,wBEW2B,CFV3B,mEAA6D,CAE7D,yBACE,mEAA8D,CAC/D,+JAQC,wBEFyB,CFGzB,mEAA6D,CAC9D,8CAIC,SAAU,CACV,2CETyB,CFU1B,2FAKC,mBAAoB,CACpB,cAAe,CACf,WAAY,CACb,kBAID,aE1ByB,CF2BzB,eAAgB,CAChB,+CAA0C,CDoC1C,sCAAuC,CClCvC,0BACE,YAAa,CACd,qKAQC,aEvCyB,CFwCzB,eAAgB,CAChB,+CAA0C,CAC3C,gDAIC,SAAU,CACV,iEEhDuB,CFiDxB,8FAKC,WAAY,CACb,iBA7BD,UEpBuB,CFqBvB,eAAgB,CAChB,gDAA0C,CDyC1C,sCAAuC,CCvCvC,yBACE,YAAa,CACd,+JAQC,UElCqB,CFmCrB,eAAgB,CAChB,gDAA0C,CAC3C,8CAIC,SAAU,CACV,+DE1CqB,CF2CtB,2FAKC,WAAY,CACb,aDqBD,6BCPiC,CDQlC,aAIC,iCAAkC","file":"marketing-buttons.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n  appearance: none !important;\n  // stylelint-disable-next-line primer/spacing\n  padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1);\n  // stylelint-disable-next-line primer/typography\n  font-size: 1rem;\n  font-weight: $font-weight-bold;\n  line-height: 1;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  border: 0;\n  // stylelint-disable-next-line primer/borders\n  border-radius: rem(6px);\n\n  @include btn-solid-mktg(\n    var(--color-text-white),\n    lighten($primary-blue-mktg, 5%),\n    $primary-blue-mktg,\n    lighten($secondary-blue-mktg, 5%),\n    $secondary-blue-mktg\n  );\n\n  &::before {\n    background-blend-mode: overlay, normal;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: \"\";\n    // stylelint-disable-next-line primer/borders\n    border-radius: rem(6px);\n    opacity: 0;\n    transition: opacity 0.4s;\n  }\n\n  &:hover {\n    text-decoration: none;\n\n    &::before {\n      opacity: 1;\n      transition: opacity 0.4s;\n    }\n  }\n}\n\n.btn-primary-mktg {\n  @include btn-solid-mktg(\n    var(--color-text-white),\n    lighten($primary-green-mktg, 5%),\n    $primary-green-mktg,\n    lighten($secondary-green-mktg, 5%),\n    $secondary-green-mktg\n  );\n}\n\n.btn-purple-mktg {\n  @include btn-solid-mktg(\n    var(--color-text-white),\n    lighten($primary-purple-mktg, 5%),\n    $primary-purple-mktg,\n    lighten($secondary-purple-mktg, 5%),\n    $secondary-purple-mktg\n  );\n}\n\n.btn-outline-mktg {\n  @include btn-outline-mktg($primary-blue-mktg, $secondary-blue-mktg, $primary-blue-mktg);\n  transition: box-shadow 0.4s, color 0.4s;\n}\n\n.btn-transparent {\n  @include btn-outline-mktg($static-color-white, $static-color-white, $static-color-white);\n  transition: box-shadow 0.4s, color 0.4s;\n}\n\n// Size modifiers\n\n.btn-sm-mktg {\n  // stylelint-disable-next-line primer/spacing\n  padding: rem(10px) rem($spacer-4) rem(12px);\n}\n\n.btn-lg-mktg {\n  // stylelint-disable-next-line primer/spacing\n  padding: 20px 30px 22px !important;\n}\n","@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {\n  color: $color;\n  background-color: $bg2;\n  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);\n\n  &::before {\n    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);\n  }\n\n  &:hover,\n  &.hover,\n  &:active,\n  &.selected,\n  &[aria-selected=\"true\"],\n  [open] > & {\n    background-color: $bg2;\n    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);\n  }\n\n  &:focus,\n  &.focus {\n    outline: 0;\n    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n@mixin btn-outline-mktg($color, $color2, $bg) {\n  color: $color;\n  background: none;\n  box-shadow: 0 0 0 1px rgba($bg, 0.3) inset;\n\n  &::before {\n    display: none;\n  }\n\n  &:hover,\n  &.hover,\n  &:active,\n  &.selected,\n  &[aria-selected=\"true\"],\n  [open] > & {\n    color: $color2;\n    background: none;\n    box-shadow: 0 0 0 2px rgba($bg, 0.5) inset;\n  }\n\n  &:focus,\n  &.focus {\n    outline: 0;\n    box-shadow: 0 0 0 2px rgba($bg, 1) inset, 0 0 0 4px rgba($bg, 0.5);\n  }\n\n  &:disabled,\n  &.disabled,\n  &[aria-disabled=\"true\"] {\n    opacity: 0.5;\n  }\n}\n\n$browser-context: 16 !default;\n\n@function rem($pixels, $context: $browser-context) {\n  @if (unitless($pixels)) {\n    $pixels: $pixels * 1px;\n  }\n\n  @if (unitless($context)) {\n    $context: $context * 1px;\n  }\n\n  @return $pixels / $context * 1rem;\n}\n","// Typography variables\n\n// Heading sizes - mobile\n// h4-h6 remain the same size on both mobile & desktop\n$h00-size-mobile: 40px !default;\n$h0-size-mobile: 32px !default;\n$h1-size-mobile: 26px !default;\n$h2-size-mobile: 22px !default;\n$h3-size-mobile: 18px !default;\n\n// Heading sizes - desktop\n$h00-size: 48px !default;\n$h0-size: 40px !default;\n$h1-size: 32px !default;\n$h2-size: 24px !default;\n$h3-size: 20px !default;\n$h4-size: 16px !default;\n$h5-size: 14px !default;\n$h6-size: 12px !default;\n\n$font-size-small: 12px !default;\n\n// Font weights\n$font-weight-bold: 600 !default;\n$font-weight-semibold: 500 !default;\n$font-weight-normal: 400 !default;\n$font-weight-light: 300 !default;\n\n// Line heights\n$lh-condensed-ultra: 1 !default;\n$lh-condensed: 1.25 !default;\n$lh-default: 1.5 !default;\n\n// Font stacks\n$body-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\" !default;\n\n// Monospace font stack\n$mono-font: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace !default;\n\n// The base body size\n$body-font-size: 14px !default;\n$body-line-height: $lh-default !default;\n","$marketing-font-path: \"/fonts/\" !default;\n\n$font-mktg: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !default;\n\n// Builds upon @primer/css/support/variables/typography.scss\n$h000-size: 64px !default;\n$h000-size-mobile: 48px !default;\n\n// Colors\n$primary-blue-mktg: #4969ed !default;\n$secondary-blue-mktg: #3355e0 !default;\n$primary-green-mktg: #2ea44f !default;\n$secondary-green-mktg: #22863a !default;\n$primary-purple-mktg: #6f57ff !default;\n$secondary-purple-mktg: #614eda !default;\n$static-color-white: #fff !default;\n\n// Animations\n$transition-time: 0.4s !default;\n$ease-mktg: cubic-bezier(0.16, 1, 0.3, 1) !default;\n\n// Increases the core spacing scale first by 8px for $spacer-7, then by 16px\n// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64,\n// 80, 96, etc.\n$spacer-7:  $spacer * 6 !default;  // 48px\n$spacer-8:  $spacer * 8 !default;  // 64px\n$spacer-9:  $spacer * 10 !default; // 80px\n$spacer-10: $spacer * 12 !default; // 96px\n$spacer-11: $spacer * 14 !default; // 112px\n$spacer-12: $spacer * 16 !default; // 128px\n\n$marketing-spacers: (\n  7: $spacer-7,\n  8: $spacer-8,\n  9: $spacer-9,\n  10: $spacer-10,\n  11: $spacer-11,\n  12: $spacer-12,\n) !default;\n\n$marketing-all-spacers: map-merge(\n  (\n    0: 0,\n    1: $spacer-1,\n    2: $spacer-2,\n    3: $spacer-3,\n    4: $spacer-4,\n    5: $spacer-5,\n    6: $spacer-6,\n  ),\n  $marketing-spacers,\n) !default;\n\n$marketing-position-variants: (\n  \"\": \"\",\n  md: \"-md\",\n  lg: \"-lg\",\n) !default;\n"]}