.breakdance-swiper-wrapper { --swiper-navigation-size: 20px; --swiper-pagination-color: #2563eb; --swiper-theme-color: #2563eb; --swiper-padding-h: 42px; position: relative; padding: 0 var(--swiper-padding-h); width: 100%; } .swiper { overflow: hidden; width: 100%; } .swiper-button-prev > svg, .swiper-button-next > svg { stroke-width: 0; stroke: currentColor; fill: currentColor; width: 100%; } .swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); z-index: 10; cursor: pointer; align-items: center; justify-content: center; } .swiper-button-prev { left: 12px; } .swiper-button-next { right: 12px; } .swiper-button-prev .swiper-pagination-bullet { display: none; } .swiper-pagination { margin-top: 8px; position: initial; } .swiper-pagination, .swiper-pagination-bullet { color: #2563eb; } .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { transition: opacity 0.2s ease-in; opacity: 0.4; } .swiper-pagination-bullet { background-color: #2563eb; margin: 0 4px !important; border-radius: 100%; bottom: initial; } .breakdance-swiper-wrapper .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); width: calc(100% - (var(--swiper-padding-h) * 2)); left: var(--swiper-padding-h); }