import { colors, responsiveMedia } from '@/styles/variables'
import styled, { css } from 'styled-components'
import { IProductAvatar } from './ProductAvatar.interface'

export const StyledAvatarCardItem = styled.div<Partial<IProductAvatar>>`
  cursor: pointer;
  border: ${props =>
    props.selected
      ? css`1px solid ${colors.secondary50}`
      : css`1px solid transparent`};
  aspect-ratio: 1/1;

  width: 64px;
  height: 100%;

  border-radius: 50%;
  overflow: hidden;
  transition: all 400ms;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 300ms ease;
  }

  &:hover {
    img {
      transform: scale(1.1);
    }
  }

  @media only screen and (max-width: ${responsiveMedia}) {
    width: 56px;
  }
`

export const WrapperStyledAvatarGroup = styled.div`
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
  div {
    flex: 0 0 auto;
  }
`