/**
 * Carousel dependency from react-image-carousel
 *
 * Issues
 * - if contain more than 5 items, will cause scrolling bug
 *
 * Todo
 * - Implement our own Carousal soon
 */
import { injectGlobal } from "styled-components"
import Carousel from "react-img-carousel"

// tslint:disable-next-line:no-unused-expression
injectGlobal`
    .JampickComponent__Header {
      color: white;
      padding-left: 13px;
    }
    .carousel .item { padding: 0 0px; }
    .carousel .carousel-track .carousel-slide { opacity: 1 !important; }
    .carousel .carousel-arrow { border: none !important; background: none !important; }
    .carousel-container-inner { margin: 0 !important; }
    .carousel .carousel-dots li { width: 25px!important; }

    .carousel .carousel-dots { bottom: 8px!important; }
    .carousel .carousel-dots button  { font-size: 34px !important; }

    .carousel-dots button { color: white !important; opacity: 0.6; }
    .carousel .carousel-dots button.selected { color: white !important; opacity: 1; }
    .carousel .carousel-dots button.selected { color: white !important; }

    .carousel .carousel-right-arrow:before, .carousel .carousel-left-arrow:before { font-size: 34px !important; }
    .carousel .carousel-right-arrow:before { font-family: jamsai-icon; content: 'i' !important; }
    .carousel .carousel-left-arrow:before {  font-family: jamsai-icon; content: 'h' !important; }
    @media (pointer: coarse) {
      .carousel .carousel-right-arrow, .carousel .carousel-left-arrow {
        display: none;
      }
    }
`

export default Carousel