import styled from 'styled-components'
import { ITeamsCard } from './TeamsCard.interface'
import { colors } from '@/styles/variables'

export const StyledInfoBoxTeam = styled.div<Partial<ITeamsCard>>`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* opacity: 0.7; */
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  padding: 24px 16px;

  background-image: linear-gradient(
    189deg,
    ${colors.gray90} 0,
    rgba(41, 41, 41, 0) 100%
  );
  background-image: linear-gradient(
    189deg,
    ${colors.gray90} 0,
    rgba(41, 41, 41, 0) 100%
  );
  background-position: -500px, 0;
  background-size: 300%, 100%;

  transition: background-position 400ms;
  /* &:hover {
      background-position: 0 0, 0 0;
    } */
`

export const StyledTeamsCard = styled.div<Partial<ITeamsCard>>`
  position: relative;
  color: ${colors.white};
  height: 100%;
  width: 100%;
  /* aspect-ratio: 1/1; */
  aspect-ratio: 2.8/3.5;
  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
`