modal.css.ts

import { style, type StyleRule } from '@vanilla-extract/css';
import { precomputedViewportRules, type Viewport } from './box.css.js';
import { typedObjectEntries, typedObjectFromEntries } from './utils.js';
import { propsVars, baseVars } from './vars.css.js';

// WARN: ordering is important here as it affects the generated CSS
// it should be the opposite order of viewportSizes (I think)
const commonViewportRules: Record<Viewport, StyleRule> = {
  tablet: {
    width: '60vw',
    padding: propsVars.space[6],
    marginInline: 'auto',
  },

  mobile: {
    minWidth: '100vw',
    minHeight: '100vh',
    marginBlock: 'unset', // unset inheritance from tablet
  },

  desktop: {
    width: '35rem',
    marginBlock: propsVars.space[8],
    marginInline: 'auto',
  },

  wide: {},
  all: {},
};

const commonBackdropProps: StyleRule = {
  // WARN: Brightness should probably be a var based on contrast scheme?
  backdropFilter: 'blur(0.5rem) brightness(0.95)',
};

export const dialogClass = style({
  // these are annoyingly not part of dialog element reset
  border: 0,
  padding: 0,
  margin: 0,

  selectors: {
    '&:not([open])': {
      visibility: 'hidden',
    },
    '&::backdrop': {
      ...commonBackdropProps,
    },
  },
});

export const modalClassName = style({
  position: 'fixed',
  top: 0,
  left: 0,
  maxWidth: '100%',
  width: '100vw',
  height: '100vh',
  zIndex: 100,
  selectors: {
    // '&:not([open])': {
    //   visibility: 'hidden',
    // },

    '&::before': {
      content: '',
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      zIndex: -1,
      ...commonBackdropProps,
    },
  },
});

export const modalInnerClassName = style({
  backgroundColor: baseVars.color.bgColor,
  borderRadius: baseVars.border.radius,
  outlineColor: baseVars.color.borderColor,
  outlineWidth: baseVars.border.width,
  outlineStyle: 'solid',
});

export const commonDimensionsClass = style({
  '@media': typedObjectFromEntries(
    typedObjectEntries(commonViewportRules).map(([viewport, rule]) => [
      precomputedViewportRules[viewport],
      rule,
    ]),
  ),
});