import styled from 'styled-components';
import { styledByMediaQuery } from '../utils/styles';

export const ParentSlider = styled.div`
  min-height: 210px;
  max-width: 848px;
  overflow: hidden;
  position: relative;
`;

export const Container = styled.div`
  display: flex;
`;

export const Wrapper = styled.div<{ translate: number }>`
  @media screen and (max-width: 992px){
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    min-height: 215px;

    &::-webkit-scrollbar {
      display: none;
    }
  }
  transition: transform ease-in-out 0.45s;
  ${({ translate }) => `transform: translateX(${translate}px)`}
`;

export const Slide = styled.div.attrs({
  className: 'slide',
})``;

export const Arrow = styled.button`
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.8);
  width: 85px;
  border: 0 none;
  outline: none;
`;

export const ArrowRight = styled(Arrow)`
  display: none;
  right: 0;
  ${styledByMediaQuery(`display: block;`)}
`;

export const ArrowLeft = styled(Arrow)`
  left: 0;
`;