yattho_view_components 0.0.1 → 0.1.1

data/app/components/yattho/alpha/button_marketing.css

@@ -1,211 +1 @@
-.btn-mktg {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
-    var(--color-mktg-btn-bg) !important;
-  -webkit-appearance: none !important;
-          appearance: none !important;
-}
-
-.btn-mktg {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-
-  /* stylelint-disable-next-line yattho/spacing */
-  padding: 0.9rem 1.5rem 1.1rem;
-
-  /* stylelint-disable-next-line yattho/typography */
-  font-size: 1rem;
-  font-weight: var(--base-text-weight-semibold, 600);
-  line-height: 1;
-  color: var(--color-canvas-default);
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-          user-select: none;
-  border: 0;
-
-  /* stylelint-disable-next-line yattho/borders */
-  border-radius: 0.375rem;
-  transition: box-shadow 0.2s, outline 0.2s ease;
-}
-
-.btn-mktg::before {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
-  }
-
-.btn-mktg::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-    content: '';
-
-    /* stylelint-disable-next-line yattho/colors */
-    border-radius: inherit;
-    opacity: 0;
-    transition: opacity 0.2s;
-    background-blend-mode: normal;
-  }
-
-.btn-mktg:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
-  }
-
-.btn-mktg:hover {
-    text-decoration: none;
-  }
-
-.btn-mktg:hover::before, .btn-mktg:focus::before, .btn-mktg:focus-visible::before, .btn-mktg.focus::before {
-      opacity: 1;
-    }
-
-/* fallback :focus state */
-
-.btn-mktg:focus {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-
-.btn-mktg:focus:not(:focus-visible) {
-      outline: solid 1px transparent;
-      box-shadow: none;
-    }
-
-/* default focus state */
-
-.btn-mktg:focus-visible {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
-.btn-mktg:active::before {
-      opacity: 0.5 !important;
-    }
-
-.btn-mktg.disabled,
-  .btn-mktg[disabled] {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.5;
-  }
-
-.btn-muted-mktg {
-  color: var(--color-fg-default) !important;
-  background: none !important;
-}
-
-.btn-muted-mktg {
-  box-shadow: var(--color-mktg-btn-shadow-outline);
-}
-
-.btn-muted-mktg::before {
-    display: none;
-  }
-
-.btn-muted-mktg:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
-  }
-
-.btn-muted-mktg:active {
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
-  }
-
-.btn-muted-mktg:active {
-
-    /* stylelint-disable-next-line yattho/box-shadow */
-  }
-
-.btn-muted-mktg:disabled {
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
-  }
-
-.btn-muted-mktg:disabled {
-
-    /* stylelint-disable-next-line yattho/box-shadow */
-  }
-
-.btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
-  background: none !important;
-  box-shadow: none !important;
-}
-
-.btn-subtle-mktg::before {
-    background: none !important;
-  }
-
-.btn-subtle-mktg:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
-  }
-
-.btn-signup-mktg {
-  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
-}
-
-.btn-signup-mktg {
-
-  /* stylelint-disable-next-line yattho/colors */
-  color: #fff;
-
-  /* stylelint-disable-next-line yattho/colors */
-}
-
-.btn-signup-mktg::before {
-    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
-  }
-
-.btn-signup-mktg::before {
-
-    /* stylelint-disable-next-line yattho/colors */
-  }
-
-/* fallback :focus state */
-
-.btn-signup-mktg:focus {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-
-    /* remove fallback :focus if :focus-visible is supported */
-  }
-
-.btn-signup-mktg:focus:not(:focus-visible) {
-      outline: solid 1px transparent;
-      box-shadow: none;
-    }
-
-/* default focus state */
-
-.btn-signup-mktg:focus-visible {
-    outline: 2px solid var(--color-accent-fg);
-    outline-offset: 2px;
-    box-shadow: none;
-  }
-
-/* Size modifiers */
-
-.btn-small-mktg {
-
-  /* stylelint-disable-next-line yattho/spacing */
-  padding: 0.625rem 1rem 0.8125rem;
-}
-
-.btn-large-mktg {
-  padding: 16px 30px 20px !important;
-}
-
-.btn-large-mktg {
-
-  /* stylelint-disable-next-line yattho/spacing */
-
-  /* stylelint-disable-next-line yattho/typography */
-  font-size: 1.25rem;
-}
+.btn-mktg{-webkit-appearance:none!important;appearance:none!important;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;color:var(--color-canvas-default);display:inline-block;font-size:1rem;font-weight:var(--base-text-weight-semibold,600);line-height:1;padding:.9rem 1.5rem 1.1rem;position:relative;text-align:center;transition:box-shadow .2s,outline .2s ease;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;z-index:1}.btn-mktg:before{background:linear-gradient(180deg,#ffffff26,#fff0)!important;background-blend-mode:normal;border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s;z-index:-1}.btn-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover)!important;text-decoration:none}.btn-mktg.focus:before,.btn-mktg:focus-visible:before,.btn-mktg:focus:before,.btn-mktg:hover:before{opacity:1}.btn-mktg:focus{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-mktg:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn-muted-mktg{background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline);color:var(--color-fg-default)!important}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--color-fg-default) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--color-fg-subtle) 0 0 0 1px inset!important}.btn-subtle-mktg{box-shadow:none!important;color:var(--color-fg-default)!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important;color:#fff}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-signup-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-signup-mktg:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{font-size:1.25rem;padding:16px 30px 20px!important}

data/app/components/yattho/alpha/button_marketing.css.json

@@ -1 +1 @@
-{"name":"alpha/button_marketing","selectors":[".btn-mktg",".btn-mktg::before",".btn-mktg:hover",".btn-mktg:hover::before"," .btn-mktg:focus::before"," .btn-mktg:focus-visible::before"," .btn-mktg.focus::before",".btn-mktg:focus",".btn-mktg:focus:not(:focus-visible)",".btn-mktg:focus-visible",".btn-mktg:active::before",".btn-mktg.disabled","\n  .btn-mktg[disabled]",".btn-muted-mktg",".btn-muted-mktg::before",".btn-muted-mktg:hover",".btn-muted-mktg:active",".btn-muted-mktg:disabled",".btn-subtle-mktg",".btn-subtle-mktg::before",".btn-subtle-mktg:hover",".btn-signup-mktg",".btn-signup-mktg::before",".btn-signup-mktg:focus",".btn-signup-mktg:focus:not(:focus-visible)",".btn-signup-mktg:focus-visible",".btn-small-mktg",".btn-large-mktg"]}
+{"name":"alpha/button_marketing","selectors":[".btn-mktg",".btn-mktg:before",".btn-mktg:hover",".btn-mktg.focus:before",".btn-mktg:focus-visible:before",".btn-mktg:focus:before",".btn-mktg:hover:before",".btn-mktg:focus",".btn-mktg:focus:not(:focus-visible)",".btn-mktg:focus-visible",".btn-mktg:active:before",".btn-mktg.disabled",".btn-mktg[disabled]",".btn-muted-mktg",".btn-muted-mktg:before",".btn-muted-mktg:hover",".btn-muted-mktg:active",".btn-muted-mktg:disabled",".btn-subtle-mktg",".btn-subtle-mktg:before",".btn-subtle-mktg:hover",".btn-signup-mktg",".btn-signup-mktg:before",".btn-signup-mktg:focus",".btn-signup-mktg:focus:not(:focus-visible)",".btn-signup-mktg:focus-visible",".btn-small-mktg",".btn-large-mktg"]}

data/app/components/yattho/alpha/button_marketing.css.map

@@ -1 +1 @@
-{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA;EAiBE;;uCAEqC;EAMrC,mCAA2B;UAA3B,2BAA2B;AA6D7B;;AAtFA;EACE,kBAAkB;EAClB,UAAU;EACV,qBAAqB;;EAErB,+CAA+C;EAC/C,6BAA6B;;EAE7B,kDAAkD;EAClD,eAAe;EACf,kDAAkD;EAClD,cAAc;EACd,kCAAkC;EAClC,kBAAkB;EAClB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAiB;UAAjB,iBAAiB;EAIjB,SAAS;;EAET,+CAA+C;EAC/C,uBAAuB;EACvB,8CAA8C;AA8DhD;;AA3DE;IAUE,yGAAyG;EAK3G;;AAfA;IACE,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;IACP,WAAW;IACX,WAAW;;IAEX,8CAA8C;IAE9C,sBAAsB;IACtB,UAAU;IACV,wBAAwB;IACxB,6BAA6B;EAC/B;;AAEA;IAEE,yDAAyD;EAC3D;;AAHA;IACE,qBAAqB;EAEvB;;AAME;MACE,UAAU;IACZ;;AAGF,0BAA0B;;AAC1B;IC1DA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;;ID2Dd,0DAA0D;EAK5D;;AAJE;MACE,8BAA8B;MAC9B,gBAAgB;IAClB;;AAGF,wBAAwB;;AACxB;ICrEA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;EDqEhB;;AAGE;MACE,uBAAuB;IACzB;;AAGF;;IAEE,oBAAoB;IACpB,eAAe;IACf,YAAY;EACd;;AAGF;EACE,yCAAyC;EACzC,2BAA2B;AAsB7B;;AAxBA;EAGE,gDAAgD;AAqBlD;;AAnBE;IACE,aAAa;EACf;;AAEA;IACE,+DAA+D;EACjE;;AAEA;IAGE,8DAA8D;EAChE;;AAJA;;IAEE,kDAAkD;EAEpD;;AAEA;IAGE,6DAA6D;EAC/D;;AAJA;;IAEE,kDAAkD;EAEpD;;AAGF;EACE,yCAAyC;EACzC,2BAA2B;EAC3B,2BAA2B;AAS7B;;AAPE;IACE,2BAA2B;EAC7B;;AAEA;IACE,+DAA+D;EACjE;;AAGF;EAME,uHAAuH;AAuBzH;;AA7BA;;EAEE,8CAA8C;EAC9C,WAAW;;EAEX,8CAA8C;AAwBhD;;AArBE;IAGE,qGAAqG;EACvG;;AAJA;;IAEE,8CAA8C;EAEhD;;AAEA,0BAA0B;;AAC1B;IC9IA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;;ID+Id,0DAA0D;EAK5D;;AAJE;MACE,8BAA8B;MAC9B,gBAAgB;IAClB;;AAGF,wBAAwB;;AACxB;ICzJA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;EDyJhB;;AAGF,mBAAmB;;AAEnB;;EAEE,+CAA+C;EAC/C,gCAAgC;AAClC;;AAEA;EAGE,kCAAkC;AAIpC;;AAPA;;EAEE,+CAA+C;;EAG/C,kDAAkD;EAClD,kBAAkB;AACpB","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold, 600);\n  line-height: 1;\n  color: var(--color-canvas-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background:\n    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line yattho/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n\n  /* stylelint-disable-next-line yattho/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line yattho/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1.25rem;\n}","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}"]}
+{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA,UAyBE,iCAA2B,CAA3B,yBAA2B,CAR3B,4FAEqC,CACrC,QAAS,CAGT,qBAAuB,CAXvB,iCAAkC,CATlC,oBAAqB,CAMrB,cAAe,CACf,gDAAkD,CAClD,aAAc,CALd,2BAA6B,CAL7B,iBAAkB,CAYlB,iBAAkB,CAWlB,0CAA8C,CAR9C,wBAAiB,CAAjB,gBAAiB,CADjB,qBAAsB,CADtB,kBAAmB,CAZnB,SAoFF,CA3DE,iBAUE,4DAAyG,CAIzG,4BAA6B,CAH7B,qBAAsB,CAPtB,QAAS,CAGT,UAAW,CAFX,MAAO,CAOP,SAAU,CAXV,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAWN,sBAAwB,CAPxB,UASF,CAEA,gBAEE,uDAAyD,CADzD,oBAEF,CAME,oGACE,SACF,CAIF,gBCxDA,eAAgB,CAFhB,wCAAgC,CAChC,kBDiEA,CAJE,oCAEE,eAAgB,CADhB,uBAEF,CAIF,wBCnEA,eAAgB,CAFhB,wCAAgC,CAChC,kBDsEA,CAGE,wBACE,oBACF,CAGF,uCAGE,cAAe,CACf,UAAY,CAFZ,mBAGF,CAGF,gBAEE,yBAA2B,CAC3B,+CAAgD,CAFhD,uCAuBF,CAnBE,uBACE,YACF,CAEA,sBACE,6DACF,CAEA,uBAGE,4DACF,CAEA,yBAGE,2DACF,CAGF,iBAGE,yBAA2B,CAF3B,uCAWF,CAPE,yCAHA,yBAKA,CAEA,uBACE,6DACF,CAGF,iBAME,wEAAuH,CAHvH,UA0BF,CArBE,wBAGE,gEACF,CAGA,uBC5IA,eAAgB,CAFhB,wCAAgC,CAChC,kBDqJA,CAJE,2CAEE,eAAgB,CADhB,uBAEF,CAIF,+BCvJA,eAAgB,CAFhB,wCAAgC,CAChC,kBD0JA,CAKF,gBAGE,6BACF,CAEA,gBAME,iBAAkB,CAHlB,gCAIF","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold, 600);\n  line-height: 1;\n  color: var(--color-canvas-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background:\n    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line yattho/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n\n  /* stylelint-disable-next-line yattho/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line yattho/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1.25rem;\n}","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}"]}