{"version":3,"sources":["../../scss/marqueefy.scss","marqueefy.css"],"names":[],"mappings":"AAAA;EACE;IACE,sEAAA;ECCF;EDEA;IACE,0EAAA;ECAF;AACF;ADGA;EACE,gBAAA;EACA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,oBAAA;EACA,wBAAA;EACA,8BAAA;EACA,2BAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA,4BAAA;EACA,4BAAA;EACA,qBAAA;EACA,2BAAA;EACA,qBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,sBAAA;EACA,qBAAA;EACA,eAAA;EACA,gDAAA;EACA,gBAAA;EACA,8BAAA;EACA,4EAAA;EACA,sCAAA;ACFF;ADIE;EACE,qBAAA;EACA,mBAAA;EACA,SAAA;EACA,kCAAA;EACA,8BAAA;EACA,sBAAA;EACA,mBAAA;EACA,yBAAA;EACA,gDAAA;EACA,iCAAA;EACA,mCAAA;ACFJ;ADII;EACE,gCAAA;ACFN;ADME;EACE,yBAAA;EACA,uBAAA;ACJJ;ADOE;EAEE,iBAAA;EACA,oBAAA;EACA,qBAAA;EACA,uBAAA;ACNJ;ADQI;EACE,UAAA;EACA,mBAAA;ACNN;ADQM;EACE,cAAA;EACA,gCAAA;ACNR;ADWE;EACE,0CAAA;EACA,2BAAA;ACTJ;ADYE;EACE,yBAAA;EACA,4CAAA;ACVJ;ADaE;EAEE,4BAAA;EACA,oCAAA;ACZJ;ADcI;EACE,4BAAA;ACZN;ADgBE;EACE,oCAAA;ACdJ","file":"marqueefy.css","sourcesContent":["@keyframes marqueefy {\n  0% {\n    transform: translate(var(--mq-translate-x-0), var(--mq-translate-y-0));\n  }\n\n  100% {\n    transform: translate(var(--mq-translate-x-100), var(--mq-translate-y-100));\n  }\n}\n\n.marqueefy {\n  --mq-bg: #f8f9fa;\n  --mq-hover-bg: #e9ecef;\n  --mq-color: #212529;\n  --mq-hover-color: #000;\n  --mq-border-width: 0;\n  --mq-border-style: solid;\n  --mq-border-color: transparent;\n  --mq-border-radius: .375rem;\n  --mq-padding-y: 1rem;\n  --mq-padding-x: 0;\n  --mq-font-size: 1rem;\n  --mq-font-family: sans-serif;\n  --mq-animation-duration: 15s;\n  --mq-translate-x-0: 0;\n  --mq-translate-x-100: -100%;\n  --mq-translate-y-0: 0;\n  --mq-translate-y-100: 0;\n  --mq-item-gap: 1rem;\n\n  box-sizing: border-box;\n  display: inline-block;\n  max-width: 100%;\n  padding: var(--mq-padding-y) var(--mq-padding-x);\n  overflow: hidden;\n  background-color: var(--mq-bg);\n  border: var(--mq-border-width) var(--mq-border-style) var(--mq-border-color);\n  border-radius: var(--mq-border-radius);\n\n  .content {\n    display: inline-block;\n    padding: 0 0 0 100%;\n    margin: 0;\n    font-family: var(--mq-font-family);\n    font-size: var(--mq-font-size);\n    color: var(--mq-color);\n    white-space: nowrap;\n    animation-name: marqueefy;\n    animation-duration: var(--mq-animation-duration);\n    animation-timing-function: linear;\n    animation-iteration-count: infinite;\n\n    .item {\n      margin: 0 var(--mq-item-gap) 0 0;\n    }\n  }\n\n  &[data-mq-direction=\"right\"] {\n    --mq-translate-x-0: -100%;\n    --mq-translate-x-100: 0;\n  }\n\n  &[data-mq-direction=\"top\"],\n  &[data-mq-direction=\"bottom\"] {\n    --mq-padding-y: 0;\n    --mq-padding-x: 1rem;\n    --mq-translate-x-0: 0;\n    --mq-translate-x-100: 0;\n\n    .content {\n      padding: 0;\n      white-space: normal;\n\n      .item {\n        display: block;\n        margin: 0 0 var(--mq-item-gap) 0;\n      }\n    }\n  }\n\n  &[data-mq-direction=\"top\"] {\n    --mq-translate-y-0: var(--mq-height, 100%);\n    --mq-translate-y-100: -100%;\n  }\n\n  &[data-mq-direction=\"bottom\"] {\n    --mq-translate-y-0: -100%;\n    --mq-translate-y-100: var(--mq-height, 100%);\n  }\n\n  &:hover,\n  &:focus-visible {\n    color: var(--mq-hover-color);\n    background-color: var(--mq-hover-bg);\n\n    .content {\n      animation-play-state: paused;\n    }\n  }\n\n  &:focus-visible {\n    outline-color: var(--mq-hover-color);\n  }\n}\n","@keyframes marqueefy {\n  0% {\n    transform: translate(var(--mq-translate-x-0), var(--mq-translate-y-0));\n  }\n  100% {\n    transform: translate(var(--mq-translate-x-100), var(--mq-translate-y-100));\n  }\n}\n.marqueefy {\n  --mq-bg: #f8f9fa;\n  --mq-hover-bg: #e9ecef;\n  --mq-color: #212529;\n  --mq-hover-color: #000;\n  --mq-border-width: 0;\n  --mq-border-style: solid;\n  --mq-border-color: transparent;\n  --mq-border-radius: .375rem;\n  --mq-padding-y: 1rem;\n  --mq-padding-x: 0;\n  --mq-font-size: 1rem;\n  --mq-font-family: sans-serif;\n  --mq-animation-duration: 15s;\n  --mq-translate-x-0: 0;\n  --mq-translate-x-100: -100%;\n  --mq-translate-y-0: 0;\n  --mq-translate-y-100: 0;\n  --mq-item-gap: 1rem;\n  box-sizing: border-box;\n  display: inline-block;\n  max-width: 100%;\n  padding: var(--mq-padding-y) var(--mq-padding-x);\n  overflow: hidden;\n  background-color: var(--mq-bg);\n  border: var(--mq-border-width) var(--mq-border-style) var(--mq-border-color);\n  border-radius: var(--mq-border-radius);\n}\n.marqueefy .content {\n  display: inline-block;\n  padding: 0 0 0 100%;\n  margin: 0;\n  font-family: var(--mq-font-family);\n  font-size: var(--mq-font-size);\n  color: var(--mq-color);\n  white-space: nowrap;\n  animation-name: marqueefy;\n  animation-duration: var(--mq-animation-duration);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n.marqueefy .content .item {\n  margin: 0 var(--mq-item-gap) 0 0;\n}\n.marqueefy[data-mq-direction=right] {\n  --mq-translate-x-0: -100%;\n  --mq-translate-x-100: 0;\n}\n.marqueefy[data-mq-direction=top], .marqueefy[data-mq-direction=bottom] {\n  --mq-padding-y: 0;\n  --mq-padding-x: 1rem;\n  --mq-translate-x-0: 0;\n  --mq-translate-x-100: 0;\n}\n.marqueefy[data-mq-direction=top] .content, .marqueefy[data-mq-direction=bottom] .content {\n  padding: 0;\n  white-space: normal;\n}\n.marqueefy[data-mq-direction=top] .content .item, .marqueefy[data-mq-direction=bottom] .content .item {\n  display: block;\n  margin: 0 0 var(--mq-item-gap) 0;\n}\n.marqueefy[data-mq-direction=top] {\n  --mq-translate-y-0: var(--mq-height, 100%);\n  --mq-translate-y-100: -100%;\n}\n.marqueefy[data-mq-direction=bottom] {\n  --mq-translate-y-0: -100%;\n  --mq-translate-y-100: var(--mq-height, 100%);\n}\n.marqueefy:hover, .marqueefy:focus-visible {\n  color: var(--mq-hover-color);\n  background-color: var(--mq-hover-bg);\n}\n.marqueefy:hover .content, .marqueefy:focus-visible .content {\n  animation-play-state: paused;\n}\n.marqueefy:focus-visible {\n  outline-color: var(--mq-hover-color);\n}\n\n/*# sourceMappingURL=marqueefy.css.map */\n"]}