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

// Desktop / tablet floating media window — a draggable overlay that
// sits ON TOP of the app (portaled to #portalContainer) instead of the
// old right-side flex pane. Position + size are owned by the component
// (inline `style`); chrome is deliberately minimal: a thin drag bar +
// close, plus a subtle resize grip. Zoom is wheel-only, navigation is
// keyboard / hover-chevrons (both live in `MediaViewerBody`).
export const floating = style({
  position: 'fixed',
  // Above normal app chrome (call rail, headers); folds modals/overlays
  // still portal above this (zIndex.Max), which is correct for dialogs
  // over the window.
  zIndex: config.zIndex.Z400,
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
  backgroundColor: color.Background.Container,
  color: color.Background.OnContainer,
  borderRadius: toRem(12),
  overflow: 'hidden',
  boxShadow: config.shadow.E400,
  border: `1px solid ${color.SurfaceVariant.Container}`,
});

// The only drag-to-move origin. `touch-action: none` so a touch-drag on
// a tablet moves the window instead of scrolling the page behind.
export const dragBar = style({
  flexShrink: 0,
  height: toRem(32),
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  paddingLeft: config.space.S300,
  paddingRight: config.space.S100,
  cursor: 'move',
  userSelect: 'none',
  touchAction: 'none',
  backgroundColor: color.Surface.Container,
  borderBottom: `1px solid ${color.SurfaceVariant.Container}`,
});

// Faint filename — present but unobtrusive; doubles as part of the
// grab surface.
export const title = style({
  flex: '1 1 auto',
  minWidth: 0,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  fontSize: toRem(12),
  color: color.Surface.OnContainer,
  opacity: 0.7,
});

export const body = style({
  position: 'relative',
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  minHeight: 0,
  minWidth: 0,
});

// Subtle bottom-right corner resize affordance — no button, just a
// draggable corner that brightens on hover.
export const resizeGrip = style({
  position: 'absolute',
  right: 0,
  bottom: 0,
  width: toRem(20),
  height: toRem(20),
  cursor: 'nwse-resize',
  touchAction: 'none',
  zIndex: 3,
  selectors: {
    '&::after': {
      content: '""',
      position: 'absolute',
      right: toRem(3),
      bottom: toRem(3),
      width: toRem(9),
      height: toRem(9),
      borderRight: `2px solid ${color.Surface.OnContainer}`,
      borderBottom: `2px solid ${color.Surface.OnContainer}`,
      borderBottomRightRadius: toRem(3),
      opacity: 0.25,
      transition: 'opacity 140ms ease',
    },
    '&:hover::after': { opacity: 0.6 },
  },
});