{"version":3,"file":"widgets/coin-marquee.css","mappings":";;;AAyBA;EACE;EACA;EACA;AAxBF;AA0BE;EACE;AAxBJ;AA2BE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzBJ;AA2BI;EArCF;EACA;EACA;EAqCI;EACA;EACA;EACA;EACA;EACA,gBAnDK;EAoDL;EACA;EACA;EACA;EACA,cAvDO;EAwDP;EACA;AAvBN;AAyBM;EACE;EACA;AAvBR;AA0BM;EACE;AAxBR;AA2BM;EACE;EACA;EACA;AAzBR;AA2BQ;EACE;EACA;EACA;AAzBV;AA4BQ;EACE;AA1BV;AA8BM;EACE;EACA;EACA;AA5BR;AA+BM;EACE;EACA;EACA;EACA;AA7BR;AA+BQ;EACE;EACA;EACA;AA7BV;AAiCM;EACE;EACA;EACA;AA/BR;AAkCM;EACE;AAhCR;AAmCM;EACE;AAjCR;AAoCM;EACE;AAlCR;AAqCM;EACE;EACA;EACA;EACA;EACA;EACA,oCA9HW;EA+HX,WA9Ha;EA+Hb;EACA;EACA;AAnCR;AAqCQ;EAzHN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAuFF;AAiCQ;EACE;AA/BV;AAmCM;EACE;EACA;EACA;AAjCR;AAoCM;EACE;EACA;EACA;AAlCR;AAoCQ;;EAEE;AAlCV,C","sources":["webpack://ultimate-crypto-widget/./assets/styles/sass/coin-marquee.scss"],"sourcesContent":["$primary-color: #03045E;\n$secondary-color: #0077B6;\n$bg-color: #fff;\n$text-color: #03045E;\n$tooltip-bg-color: rgba(0, 0, 0, 0.8);\n$tooltip-text-color: #fff;\n$transition-duration: 0.3s;\n\n@mixin flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n@mixin tooltip-arrow($color) {\n  content: '';\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent $color transparent;\n}\n\n.ucwp-coin-marquee-main-marquee-element {\n  padding: 10px;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .ucwp-coin-marquee-main {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: left;\n    align-items: center;\n    gap: 50px;\n    overflow-x: hidden; \n    overflow-y: visible;\n    position: relative;\n    padding: 20px 0;\n    height: fit-content;\n\n    .ucwp-coin-marquee-coin-card-bounding-box {\n      @include flex-center;\n      flex-shrink: 0;\n      box-sizing: content-box;\n      padding: 3px;\n      height: 80px;\n      width: 200px;\n      background: $bg-color;\n      gap: 10px;\n      font-family: 'Poppins', sans-serif;\n      font-size: 14px;\n      font-weight: 400;\n      color: $text-color;\n      overflow: hidden;\n      transition: transform $transition-duration, box-shadow $transition-duration;\n\n      &:hover {\n        transform: translateY(-10px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n      }\n\n      > div {\n        height: 100%;\n      }\n\n      .ucwp-coin-marquee-coin-logo {\n        height: 100%;\n        flex-basis: calc((100% - 10px) / 3);\n        width: calc((100% - 10px) / 3);\n\n        > img {\n          border-radius: 100px;\n          height: 100%;\n          transition: transform $transition-duration;\n        }\n\n        &:hover img {\n          transform: rotate(360deg);\n        }\n      }\n\n      .ucwp-coin-marquee-coin-graph {\n        flex-basis: calc((100% - 10px) / 5 * 2);\n        width: calc((100% - 10px) / 5 * 2);\n        height: 100%;\n      }\n\n      .ucwp-coin-marquee-main-coin-basic-info {\n        flex-basis: calc((100% - 10px) / 3 * 2);\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n\n        > div {\n          width: 100%;\n          flex-basis: calc(100% / 3);\n          text-align: center;\n        }\n      }\n\n      .ucwp-coin-marquee-coin-name-and-symbol {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .ucwp-coin-marquee-coin-price {\n        font-weight: 600;\n      }\n\n      .wcp-coin-marquee-coin-growth:has(.fa-arrow-up) {\n        color: green;\n      }\n\n      .wcp-coin-marquee-coin-growth:has(.fa-arrow-down) {\n        color: red;\n      }\n\n      .ucwp-coin-marquee-coin-tooltip {\n        position: absolute;\n        display: none;\n        width: 200px;\n        height: max-content;\n        padding: 10px;\n        background-color: $tooltip-bg-color;\n        color: $tooltip-text-color;\n        border-radius: 5px;\n        z-index: 100;\n        white-space: nowrap;\n\n        &::after {\n          @include tooltip-arrow($tooltip-bg-color);\n        }\n      }\n\n      &:hover {\n        .ucwp-coin-marquee-coin-tooltip {\n          display: block;\n        }\n      }\n\n      .ucwp-coin-marquee-coin-tooltip-content {\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n      }\n\n      .ucwp-coin-marquee-coin-tooltip-content-text {\n        display: flex;\n        justify-content: center;\n        gap: 5px;\n\n        .ucwp-coin-marquee-coin-tooltip-content-text-title,\n        .ucwp-coin-marquee-coin-tooltip-content-text-value {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}