import styled, { css } from 'styled-components'

import { IBlogCard } from './BlogCard.interface'
import { colors } from '@/styles/variables'

export const StyledBlogCard = styled.div<Partial<IBlogCard>>`
  position: relative;
  cursor: pointer;
  max-width: 100%;
  background-color: transparent;
  color: ${colors.white};
  display: flex;
  flex-direction: column;
  
  .image-element {
    position: relative;
    width: 100%;
    overflow:hidden;

    img {
      /* aspect-ratio: ${props => (props.variant === 'regular' ? css`3/2` : css`auto`)}; */
      background-image: linear-gradient(lightgray 0%, lightgray 50%);
      transition: opacity 0.6s, transform 0.6s;
      backface-visibility: hidden;
    }
  }

  button {
    width:100%
  }

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

.text-no-wrap{
  white-space: nowrap;
}

  &:hover {
    .image-element {
      img{
        opacity: 0.4;
        transform: scale3d(1.1,1.1,1);
      }
    }

    button {
      &:before{
        transform: scaleX(1);
      }
    }
  }
`