@findify/react-components/src/components/Swiper/styles.css

Findify react UI components

/* Swiper */


:root {
  --swiper-theme-color: #333;
  --swiper-navigation-size: 44px;
}


.root{
:global(.swiper-container) {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index:1;
}

:global(.swiper-container-vertical > .swiper-wrapper) {
  flex-direction: column;
}

:global(.swiper-wrapper) {
  position:relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: stretch;
  transition-property:transform;
  box-sizing: content-box;
}

:global(.swiper-container-android .swiper-slide), :global(.swiper-wrapper) {
  transform:translate3d(0px,0,0);
}

:global(.swiper-container-free-mode > .swiper-wrapper) {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

:global(.swiper-slide) {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  transition-property: transform;
}

:global(.swiper-slide-invisible-blank) {
  visibility: hidden;
}

:global(.swiper-button-disabled) {
  display: none!important;
}

:global(.findify-recommendation) {
  padding: 0 30px;
}
}
/* Component styles */

.root{
  position: relative;
}

.prev, .next{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: transparent;
  border: none;
  height: 100%;
  color: $color-black;
}

.prev {
  left: 0;
  right: auto;
  outline: none;
  left: -30px;
}

.next {
  right: 0;
  left: auto;
  outline: none;
  right: -30px;
}

.arrow{
  
}