{"version":3,"sources":["../../../client/scss/consent.scss"],"names":[],"mappings":"AA2BA,0CACE,KACE,SAAA,CAEF,GACE,SAAA,CAAA,CALJ,kCACE,KACE,SAAA,CAEF,GACE,SAAA,CAAA,CAGJ,iCACE,KACE,SAAA,CACA,2BAAA,CAEF,GACE,SAAA,CACA,uBAAA,CAAA,CAPJ,yBACE,KACE,SAAA,CACA,2BAAA,CAEF,GACE,SAAA,CACA,uBAAA,CAAA,CAGJ,yCACE,KACE,SAAA,CACA,iDAAA,CAEF,GACE,SAAA,CACA,6CAAA,CAAA,CAPJ,iCACE,KACE,SAAA,CACA,iDAAA,CAEF,GACE,SAAA,CACA,6CAAA,CAAA,CAGJ,yCACE,KACE,SAAA,CACA,4CAAA,CAEF,GACE,SAAA,CACA,wCAAA,CAAA,CAPJ,iCACE,KACE,SAAA,CACA,4CAAA,CAEF,GACE,SAAA,CACA,wCAAA,CAAA,CAIJ,yBACE,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,YAhDQ,CAiDR,yBAAA,CACA,oDAAA,CAAA,4CAAA,CAGF,SACE,cAAA,CACA,cAAA,CACA,aAAA,CACA,2BAAA,CAEA,sBAAA,CACA,gBAAA,CACA,iBAAA,CAEA,2IACE,CAKF,iBAAA,CACA,2CAAA,CAAA,mCAAA,CACA,YAAA,CAEA,uCApBF,SAqBI,sBAAA,CAAA,cAAA,CAAA,CAKJ,kBACE,QAnFc,CAqFhB,qBACE,WAtFc,CAwFhB,mBACE,SAzFc,CA2FhB,oBACE,UA5Fc,CAmGhB,0CAEE,UAnGc,CAoGd,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CAEF,qBACE,OAAA,CACA,QAAA,CACA,+BAAA,CACA,4CAAA,CAAA,oCAAA,CAEF,qBACE,QAAA,CACA,0BAAA,CACA,4CAAA,CAAA,oCAAA,CAGF,uCACE,kBACE,QArHkB,CAuHpB,qBACE,WAxHkB,CA0HpB,mBACE,SA3HkB,CA6HpB,oBACE,UA9HkB,CAgIpB,SACE,2BAAA,CAAA,CAeJ,2CATE,oBAAA,CACA,qBAAA,CACA,UAAA,CAWF,qBARE,iBAAA,CACA,qBAAA,CACA,aAAA,CASF,mCACE,qBAZA,iBAAA,CACA,qBAAA,CACA,aAAA,CAAA,CAgBF,kBACE,cA9Jc,CAiKhB,gBACE,kBAAA,CAEF,eACE,cAAA,CAIF,iBACE,kBAAA,CAEA,wBAzLA,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,QAAA,CACA,eAAA,CACA,kBAAA,CAsLF,gBACE,oBAAA,CACA,mBAAA,CAEA,2CAEE,qBAAA,CAKJ,kBACE,gBAAA,CACA,iBAAA,CAEF,0BACE,iBAAA,CAEF,yBACE,gBAAA,CAEF,wBACE,YAAA,CAGF,iBACE,oBAAA,CACA,iBAAA,CACA,gBAAA,CACA,QAAA,CACA,iBAAA,CACA,kBAAA,CACA,iBAAA,CACA,mBAAA,CACA,oBAAA,CACA,iBAAA,CACA,gBAAA,CACA,mBAAA,CACA,qBAAA,CACA,oCAAA,CACA,kBAAA,CAEF,uBACE,YAAA,CAGF,yCACE,wBACE,cAAA,CAEF,uBACE,eAAA,CAAA,CAIJ,0BACE,wBAAA,CACA,UAAA,CAEA,gEAEE,wBAAA,CAIJ,4BACE,qBAAA,CACA,UAAA,CAEA,oEAEE,wBAAA,CAGJ,kCACE,qBAAA,CACA,UAAA,CAEA,gFAEE,qBAAA","file":"consent.css","sourcesContent":["@function rem($value) {\n  @if unit($value) == 'px' {\n    // Assume the 16px browser default is used.\n    @return ($value / 16px) * 1rem;\n  } @else {\n    @error 'Expected px or em value, got `#{unit($value)}`';\n  }\n}\n\n@mixin visuallyhidden {\n  clip: rect(0 0 0 0);\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n$edge-distance: 10px;\n$edge-distance-large: 15px;\n$content-width: 40em;\n$z-index: 5000;\n$animation-duration: 0.25s;\n\n@keyframes consent-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes consent-enter {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@keyframes consent-enter--center {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) translateY(0);\n  }\n}\n@keyframes consent-enter--middle {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n.consent-backdrop--modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: $z-index;\n  background: rgba(0, 0, 0, 0.4);\n  animation: consent-backdrop-enter $animation-duration ease 1;\n}\n\n.consent {\n  position: fixed;\n  min-width: 20em;\n  max-width: 90%;\n  max-width: calc(100% - #{$edge-distance * 2});\n  // The title will 'add' some padding visually\n  padding: 13px 15px 15px;\n  border: 1px solid;\n  border-radius: 5px;\n  // prettier-ignore\n  box-shadow:\n    0 0 1px rgba(0, 0, 0, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.06),\n    0 2px 4px rgba(0, 0, 0, 0.07),\n    0 4px 8px rgba(0, 0, 0, 0.07),\n    0 8px 16px rgba(0, 0, 0, 0.07);\n  font-size: rem(14px);\n  animation: consent-enter $animation-duration ease 1;\n  z-index: $z-index + 1;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n}\n\n/* ------------------- Position ------------------- */\n.consent--pos-top {\n  top: $edge-distance;\n}\n.consent--pos-bottom {\n  bottom: $edge-distance;\n}\n.consent--pos-left {\n  left: $edge-distance;\n}\n.consent--pos-right {\n  right: $edge-distance;\n}\n\n// The percentage centering makes the natural width behave differently from how\n// it is for the corner positions and it's less nice on smaller screens. Set\n// a width in this case, using max-content where supported to still match the\n// text for when it's short.\n.consent--pos-center,\n.consent--pos-middle {\n  width: $content-width;\n  width: max-content;\n}\n.consent--pos-center {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  animation-name: consent-enter--center;\n}\n.consent--pos-middle {\n  left: 50%;\n  transform: translateX(-50%);\n  animation-name: consent-enter--middle;\n}\n\n@media screen and (min-width: rem(600px)) {\n  .consent--pos-top {\n    top: $edge-distance-large;\n  }\n  .consent--pos-bottom {\n    bottom: $edge-distance-large;\n  }\n  .consent--pos-left {\n    left: $edge-distance-large;\n  }\n  .consent--pos-right {\n    right: $edge-distance-large;\n  }\n  .consent {\n    max-width: calc(100% - #{$edge-distance-large * 2});\n  }\n}\n\n/* ------------------- Theme ------------------- */\n@mixin light-theme {\n  border-color: #e4e4e4;\n  background-color: #fff;\n  color: #333;\n}\n@mixin dark-theme {\n  border-color: #333;\n  background-color: #222;\n  color: #fafafa;\n}\n.consent--theme-light,\n.consent--theme-auto {\n  @include light-theme;\n}\n.consent--theme-dark {\n  @include dark-theme;\n}\n@media (prefers-color-scheme: dark) {\n  .consent--theme-auto {\n    @include dark-theme;\n  }\n}\n\n/* ------------------- Content ------------------- */\n.consent__content {\n  max-width: $content-width;\n}\n\n.consent__title {\n  font-size: rem(18px);\n}\n.consent__text {\n  margin: 0 0 1em;\n}\n\n/* ------------------- Group checkboxes ------------------- */\n.consent__groups {\n  margin-bottom: 0.5em;\n\n  legend {\n    @include visuallyhidden;\n  }\n}\n\n.consent__group {\n  display: inline-block;\n  margin: 0 1em 0.5em 0;\n\n  input,\n  span {\n    vertical-align: middle;\n  }\n}\n\n/* ------------------- Action buttons ------------------- */\n.consent__actions {\n  margin-left: -5px;\n  margin-right: -5px;\n}\n.consent__actions--center {\n  text-align: center;\n}\n.consent__actions--right {\n  text-align: right;\n}\n.consent__actions--full {\n  display: flex;\n}\n\n.consent__action {\n  display: inline-block;\n  margin: 10px 5px 0;\n  padding: 6px 12px;\n  border: 0;\n  border-radius: 3px;\n  font-weight: normal;\n  font-size: inherit;\n  line-height: inherit;\n  text-decoration: none;\n  text-align: center;\n  text-shadow: none;\n  text-transform: none;\n  vertical-align: middle;\n  transition: background-color 0.1s ease;\n  white-space: nowrap;\n}\n.consent__action--full {\n  flex: 1 1 50%;\n}\n\n@media screen and (max-width: rem(450px)) {\n  .consent__actions--full {\n    flex-wrap: wrap;\n  }\n  .consent__action--full {\n    flex-basis: auto;\n  }\n}\n\n.consent__action--primary {\n  background-color: #1e6bc4;\n  color: #fff;\n\n  &:hover,\n  &:focus {\n    background-color: mix(#000, #1e6bc4, 20%);\n  }\n}\n\n.consent__action--secondary {\n  background-color: #eee;\n  color: #333;\n\n  &:hover,\n  &:focus {\n    background-color: mix(#000, #eee, 10%);\n  }\n}\n.consent__action--secondary--dark {\n  background-color: #555;\n  color: #fff;\n\n  &:hover,\n  &:focus {\n    background-color: mix(#fff, #555, 10%);\n  }\n}\n"]}