import styled from 'styled-components';
import {rem} from '../style/function.style'

const NEXT_ANIMATION_DURATION = 600;

export const Container = styled.div`
  margin: auto;
  padding: 0 ${rem(28)};
  .cardImg{
    width: 100%;
    margin-bottom: ${rem(20)};
  }
  .cardBox{
		width: 100%;  
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
		background-size: cover;
    overflow: hidden;
  }
  .button{
    width: ${rem(320)};
    max-width: 100%;
    padding: ${rem(22)} ${rem(24)};
    background: #FF6C93;
    border: ${rem(1)} solid #FF6C93;
    color: #FFFFFF;
    box-shadow: ${rem(0)} ${rem(8)} ${rem(32)} rgba(255, 108, 147, 0.4);
    border-radius: ${rem(50)};
    margin: ${rem(36)} 0;
    font-size: ${rem(26)};
    font-weight: 500;
    letter-spacing: 0.1em;
    &.disabled{
      background: #F5F5F5;
      border: ${rem(1)} solid #CCCCCC;
      color: #CCCCCC;
      box-shadow: none;
    }
  }
  .showing{
    position: relative;
    width: 100%;
    height: ${rem(244)};
    margin-bottom: ${rem(32)};
  }
  .carouselBox{
    left: 0;
    top: 0px;
    display: flex;
    flex-direction: row;
    &::-webkit-scrollbar{
        display: none;
    }
    .content{
      width: ${rem(144)};
      margin-right: ${rem(24)};
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      &:last-of-type{
        margin-right: 0;
      }
    }
    .itemImg{
      width: ${rem(144)};
      height: ${rem(144)};
      border-radius: ${rem(24)};
      background: #FFFFFF;
    }
    .name{
      color: #2E2E2E;
      font-weight: 500;
      width: 100%;
      height: ${rem(72)};
      font-size: ${rem(26)};
      line-height: ${rem(36)};
      margin-top: ${rem(20)};
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      word-break: break-word;
      text-align: center;
    }
  }
`