import styled from '@emotion/styled';
import StyledCarousel from 'components/styled-carousel';

import { breakpoints, space } from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const Slider: any = styled(StyledCarousel)`
    .slick-list {
      img {
        display: block;
      }
    }

    .slick-arrow {
      z-index: ${Z_INDEX.PRODUCT_SLIDER_UI};
      transform: translate(0,0);
      bottom: 8px;
      left: calc(20% + 15px);

      > div {
        border-radius: 0;
      }
    }

    .slick-next {
      margin-left: 52px;
    }

    .slick-dots {
      bottom: auto;
      display: flex !important;
      flex-wrap: wrap;
      margin-top: 10px;

      li {
        margin: 0 ${space.xsmall}px ${space.xsmall}px 0;
      }

      a {
        display: block;
      }
    }

    .slick-dots li {
      width: 80px;
      height: 80px;
    }
`;