import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';

export const Wrap = style([
  DefaultReset,
  {
    display: 'block',
    width: toRem(480),
    maxWidth: '100%',
  },
]);

export const Grid = style([
  DefaultReset,
  {
    display: 'grid',
    gap: toRem(3),
    width: '100%',
    borderRadius: config.radii.R400,
    overflow: 'hidden',
  },
]);

export const Cell = style([
  DefaultReset,
  {
    position: 'relative',
    aspectRatio: '1 / 1',
    minWidth: 0,
    padding: 0,
    border: 'none',
    cursor: 'pointer',
    backgroundColor: color.SurfaceVariant.Container,
    color: color.SurfaceVariant.OnContainer,
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    selectors: {
      '&:focus-visible': {
        outline: `${config.borderWidth.B600} solid ${color.Primary.Main}`,
        outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
      },
    },
  },
]);

export const CellImg = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block',
    transition: 'transform 150ms',
    selectors: {
      [`${Cell}:hover &`]: {
        transform: 'scale(1.03)',
      },
    },
  },
]);

export const CellBlur = style([
  DefaultReset,
  {
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
  },
]);

export const PlayBadge = style([
  DefaultReset,
  {
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: toRem(36),
    height: toRem(36),
    borderRadius: config.radii.Pill,
    backgroundColor: 'rgba(0, 0, 0, 0.55)',
    color: 'white',
    pointerEvents: 'none',
  },
]);

export const Footer = style([
  DefaultReset,
  {
    display: 'flex',
    alignItems: 'center',
    gap: config.space.S200,
    marginTop: config.space.S100,
  },
]);

export const FooterButton = style([
  DefaultReset,
  {
    background: 'none',
    border: 'none',
    padding: 0,
    cursor: 'pointer',
    color: 'inherit',
    textDecoration: 'underline',
    textDecorationColor: 'transparent',
    selectors: {
      '&:hover, &:focus-visible': {
        textDecorationColor: 'currentColor',
      },
    },
  },
]);