{"version":3,"file":"ticker.css","mappings":"AAMA,0BACE,GACE,uCACA,+BACA,mBAGF,KACE,2CACA,oCAIJ,kBACE,GACE,uCACA,+BACA,mBAGF,KACE,2CACA,oCAIJ,uBACE,YACA,eAEA,kBACA,mBAEA,aAEA,+BACA,eACA,mBAEA,0CACE,eACA,yBACA,wBA5CY,CA6CZ,mBACA,mBAEA,aAEA,+BACA,eACA,mBAEA,gDACE,+BACA,kBAGF,kEACE,SACA,WAGF,kEACE,mBAIA,sEACE,mBACA,WAKN,8CACE,eACA,WACA,sBACA,sBAEA,kBAEA,aACA,kBAEA,oDACE,+BAIF,kDACE,mBAKN,qBAEE,aACA,kBAGF,aAEE,YACA,8BAEA,gBACA,YACA,uBAEA,+CAGA,eAEA,qBACE,qBACA,YACA,iBACA,mBACA,kBACA,uBAEA,2CACA,mCACA,yCACA,iCACA,8BACA,sBACA,8BArIO,CAsIP,sBAtIO,CAwIP,4BACE,oCACA,4BAGF,2BACE,qBAEA,eACA,eAKN,cACE,yBACA,sBACA,qBACA,iB","sources":["webpack://@e3c-summer-worker/homepage-ticker/./src/ticker.scss"],"sourcesContent":["// Ticker Animation\n// Animation Based off of https://codepen.io/lewismcarey/pen/GJZVoG\n\n$duration: 12s;\n$warningYellow: #f5a623;\n\n@-webkit-keyframes ticker {\n  0% {\n    -webkit-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n\n  100% {\n    -webkit-transform: translate3d(-100%, 0, 0);\n    transform: translate3d(-100%, 0, 0);\n  }\n}\n\n@keyframes ticker {\n  0% {\n    -webkit-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n\n  100% {\n    -webkit-transform: translate3d(-100%, 0, 0);\n    transform: translate3d(-100%, 0, 0);\n  }\n}\n\n.ticker-toggle-wrapper {\n  margin: auto; // centers element horizontally\n  padding: 0.5em 0; // extra padding on the top and bottom\n\n  width: fit-content;\n  height: fit-content;\n\n  display: grid;\n  // HARDCODED the icon size\n  grid-template-columns: 1fr 18px;\n  column-gap: 1em;\n  align-items: center; // vertical centering\n\n  .ticker-toggle-btn {\n    cursor: pointer;\n    border: 1px solid $warningYellow;\n    background-color: $warningYellow;\n    border-radius: 0.8em;\n    padding: 0.5em 0.75em;\n\n    display: grid;\n    // HARDCODED the icon size\n    grid-template-columns: 18px 1fr;\n    column-gap: 8px;\n    align-items: center; // vertical centering\n\n    &:hover {\n      background-color: transparent;\n      border-color: white;\n    }\n\n    p.ticker-toggle-btn-txt {\n      margin: 0;\n      color: white;\n    }\n\n    .ticker-toggle-btn-icon {\n      height: fit-content;\n\n      // remove vertical line on the bottom of the svg element\n      // https://stackoverflow.com/a/24626986\n      svg {\n        vertical-align: top;\n        color: white;\n      }\n    }\n  }\n\n  .ticker-btn-globe-icon {\n    cursor: pointer;\n    color: black;\n    background-color: white;\n    border: 1px solid white;\n\n    border-radius: 1em;\n\n    padding: 0.5em;\n    width: fit-content;\n\n    &:hover {\n      background-color: transparent;\n    }\n    // remove vertical line on the bottom of the svg element\n    // https://stackoverflow.com/a/24626986\n    svg {\n      vertical-align: top;\n    }\n  }\n}\n\n.ticker-wrapper,\n#elm {\n  height: 116px;\n  margin-bottom: 1em;\n}\n\n.ticker-wrap {\n  // fill 100% of the viewport\n  width: 100vw;\n  margin-left: calc(-50vw + 50%);\n\n  overflow: hidden;\n  height: 4rem;\n  box-sizing: content-box;\n\n  background-color: #ffffff96;\n\n  // when the user clicks, the ticker will play/pause\n  cursor: pointer;\n\n  .ticker {\n    display: inline-block;\n    height: 4rem;\n    line-height: 4rem;\n    white-space: nowrap;\n    padding-left: 100%;\n    box-sizing: content-box;\n\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-timing-function: linear;\n    animation-timing-function: linear;\n    -webkit-animation-name: ticker;\n    animation-name: ticker;\n    -webkit-animation-duration: $duration;\n    animation-duration: $duration;\n\n    &.paused {\n      -webkit-animation-play-state: paused;\n      animation-play-state: paused;\n    }\n\n    &__item {\n      display: inline-block;\n\n      padding: 0 2rem;\n      font-size: 2rem;\n    }\n  }\n}\n\n.unselectable {\n  -webkit-user-select: none; /* Safari */\n  -moz-user-select: none; /* Firefox */\n  -ms-user-select: none; /* IE10+/Edge */\n  user-select: none; /* Standard */\n}\n"],"names":[],"sourceRoot":""}