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

// Click affordance for the timeline image thumbnail. Without this
// the `<img>` looked decorative on web (the default cursor stays
// as `default`) even though it's clickable to open the media
// viewer. The subtle 0.92 brightness on hover doubles as the
// "this is interactive" signal — same idiom as how the rest of
// the app's clickable surfaces shift tone on hover.
//
// `will-change: filter` hints the compositor so the brightness
// transition runs on the GPU instead of repainting on the CPU —
// matters for large hi-DPI thumbnails on slower phones.
export const ImageClickable = style({
  cursor: 'pointer',
  transition: 'filter 120ms ease',
  willChange: 'filter',
  selectors: {
    '&:hover': { filter: 'brightness(0.92)' },
  },
});

// `:focus-visible` outline on the inner `<img>` (which carries
// `tabIndex` + `role="button"`, not the wrapper Box). Lives as a
// `globalStyle` because vanilla-extract's `style({...})` only
// permits selectors that target the class itself (`&...`) — a
// descendant selector like `& img:focus-visible` errors at build
// time. `globalStyle` is the documented escape valve for that.
globalStyle(`${ImageClickable} img:focus-visible`, {
  outline: `2px solid currentColor`,
  outlineOffset: '-2px',
});

export const RelativeBase = style([
  DefaultReset,
  {
    position: 'relative',
    width: '100%',
    height: '100%',
  },
]);

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

export const AbsoluteFooter = style([
  DefaultReset,
  {
    position: 'absolute',
    pointerEvents: 'none',
    bottom: config.space.S100,
    left: config.space.S100,
    right: config.space.S100,
  },
]);

export const Blur = style([
  DefaultReset,
  {
    filter: 'blur(44px)',
  },
]);