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

export const MediaDrawer = style({
  width: toRem(399),
});

export const MediaDrawerSolo = style({
  width: '100%',
  flexGrow: 1,
});

export const MediaDrawerHeader = style({
  flexShrink: 0,
  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
  borderBottomWidth: config.borderWidth.B300,
});

export const MediaDrawerContentBase = style({
  position: 'relative',
  overflow: 'hidden',
});

export const MediaDrawerContent = style({
  padding: `${config.space.S100} ${config.space.S200} ${config.space.S200}`,
});

export const MediaMonthSection = style({
  marginBottom: config.space.S300,
});

export const MediaMonthHeader = style({
  position: 'sticky',
  top: 0,
  zIndex: 2,
  margin: '5px 0',
  padding: `0 ${config.space.S100}`,
  lineHeight: 1.2,
  backgroundColor: color.Background.Container,
  color: color.Background.OnContainer,
});

export const MediaDaySection = style({
  marginBottom: config.space.S300,
});

export const MediaDayHeader = style({
  padding: `${config.space.S100} ${config.space.S100} ${config.space.S200}`,
  color: color.Background.OnContainer,
});

export const MediaGrid = style({
  display: 'grid',
  gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
  gap: config.space.S200,
});

export const MediaTile = style({
  position: 'relative',
  aspectRatio: '1',
  borderRadius: config.radii.R400,
  overflow: 'hidden',
  border: 'none',
  padding: 0,
  cursor: 'pointer',
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
});

export const MediaTileImg = style({
  width: '100%',
  height: '100%',
  objectFit: 'cover',
  display: 'block',
});

export const MediaTileBadge = style({
  position: 'absolute',
  right: config.space.S100,
  bottom: config.space.S100,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: toRem(24),
  height: toRem(24),
  borderRadius: config.radii.R400,
  backgroundColor: 'rgba(0, 0, 0, 0.55)',
  color: '#fff',
});

export const MediaEmpty = style({
  padding: config.space.S400,
  textAlign: 'center',
});

export const MediaFooter = style({
  padding: config.space.S200,
  display: 'flex',
  justifyContent: 'center',
});

export const MediaUserFiltersScroll = style({
  flexShrink: 0,
  flexGrow: 0,
  overflowX: 'auto',
  overflowY: 'hidden',
  scrollbarWidth: 'thin',
  scrollbarColor: `${color.SurfaceVariant.ContainerLine} ${color.SurfaceVariant.Container}`,
  selectors: {
    '&::-webkit-scrollbar': {
      height: toRem(8),
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: color.SurfaceVariant.Container,
      borderRadius: config.radii.R400,
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: color.SurfaceVariant.ContainerLine,
      borderRadius: config.radii.R400,
      border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.Container}`,
      backgroundClip: 'padding-box',
    },
    '&::-webkit-scrollbar-thumb:hover': {
      backgroundColor: color.Surface.ContainerLine,
    },
  },
});

export const MediaUserFilters = style({
  display: 'flex',
  flexWrap: 'nowrap',
  alignItems: 'center',
  gap: config.space.S500,
  padding: `${config.space.S200} ${config.space.S200}`,
  width: 'max-content',
  minWidth: '100%',
  boxSizing: 'border-box',
});

export const MediaUserChip = style({
  flexShrink: 0,
});

export const MediaUserChipLabel = style({
  maxWidth: toRem(72),
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
});