import { variables } from '@/index'
import styled from 'styled-components'

export const StyledWishlist = styled.div`
  border-color: 1px solid #252525;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
`
export const StyledWishlistItem = styled.div`
  /* background-color:red; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .clamp-line {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .delete-button {
    color: ${variables.colors.error};
  }
  button {
    width: fit-content;
    
  }
`

export const StyledWishlistPhoto = styled.div`
  border: 1px solid ${variables.colors.gray30};
  aspect-ratio: 1/1;
  background-color: ${variables.colors.gray20};
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
`