import { css } from '@emotion/core';

import { rhythm } from 'utils/typography';
import { easings, shadows, breakpoints, widths } from 'utils/theme';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const SliderWrapper = css`
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
`;

export const InlineSlideStyles = css`

  @media (min-width: ${breakpoints.medium}) {
    margin: 0 auto;
    padding: 0 ${rhythm(1)};
    max-width: ${widths.container}px;
  }

  .slick-list {
    margin: 0 -20px;
  }

  .slick-arrow {
    transition: transform .2s ${easings.easeIn};

    &:hover {
      transform: scale(1.1) translateY(-50%);

      > div {
        transition: box-shadow .2s ${easings.easeIn};
        box-shadow: ${shadows.small};
      }
    }

    &.slick-next {
      right: 40px;
    }

    &.slick-prev {
      left: 40px;
    }
  }

  .slick-slide {
    transition: opacity .2s ${easings.easeIn};
    padding: 0 10px;

    @media (max-width: 900px) {
      opacity: 0.4;
      padding: 0 5px;
    }

    &.slick-active {
      @media (max-width: 900px) {
        opacity: 1
      }
    }
  }
`;

export const ProductSideHeading = css`
  display: flex;
  align-self: center;
  width: 40%;
  padding: 15vw 6vw;
  margin-top: -140px;
  z-index: ${Z_INDEX.PRODUCT_SLIDER_UI};

  @media (max-width: ${breakpoints.medium}) {
    margin: 0;
    padding: 8vw 20px;
    width: 100%;
  }
`;

export const SliderWrapperSideHeading = css`
  padding: 90px 0 90px 20px;

  @media (max-width: ${breakpoints.medium}) {
    padding: 30px 0;
  }
`;

export const SlickStylesSideHeading = css`
  .slick-slide {
    padding: 0 20px;
  }

  .slick-list {
    margin-bottom: 80px;
  }

  .slick-dots {
    margin: 0;
    bottom: 28px;
  }

  .slick-arrow {
    top: auto !important;
    bottom: -5px;

    &.slick-next {
      right: 20px;
    }

    &.slick-prev {
      left: 20px;
    }
  }
`;