import { styled } from 'styled-components'
import { IProjectCard } from './ProjectCard.interface'
import { colors } from '@/styles/variables'

export const StyledInfoBox = styled.div<Partial<IProjectCard>>`
  background: linear-gradient(
    0deg,
    rgba(23, 23, 23, 1) 0%,
    rgba(23, 23, 23, 0.2) 50%,
    rgba(23, 23, 23, 1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: ${colors.white};
  padding: 16px;
`

export const StyledProjectCard = styled.div<Partial<IProjectCard>>`
  color: ${colors.white};
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  aspect-ratio: 8.5/4;

  @media only screen and (max-width: 450px) {
    aspect-ratio: 1/1;
  }

  img {
    width: 100%;
    object-fit: cover;
    height: 100%;
  }

  i {
    transition: transform 400ms;
    transform: rotate(-45deg);
  }
  &:hover {
    button {
      width: 100%;
      color: ${colors.white};
        &:before{
          transform: scaleX(1);
        }
    }
  }
`