import Slider from 'react-slick';
import styled from '@emotion/styled';

import { colors, durations } from 'utils/theme';
import { MI_Transition } from 'utils/styles/mixins';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const SliderWithStyles = styled(Slider)`
  .slick-arrow {
    width: auto;
    height: auto;

    z-index: ${Z_INDEX.PRODUCT_SLIDER_UI};

    &:before {
      display: none;
    }
  }

  .slick-dots {
    position: relative;
    bottom: 0;

    li {

      button:before {
        ${MI_Transition('all', durations.standard)}
        font-size: 17px;
        color: ${(props: any): any => props.iconColour};
        opacity: .2;
      }

      &.slick-active {
        button:before {
          color: ${(props: any): any => props.iconColour};
          opacity: 1;
          cursor: default;
        }
      }

      &:hover:not(.slick-active) {
        button:before {
          color: ${colors.primary};
          opacity: 1;
        }
      }
    }
  }
`;