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

export const Editor = style([
  DefaultReset,
  {
    backgroundColor: color.SurfaceVariant.Container,
    color: color.SurfaceVariant.OnContainer,
    boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.R400,
    overflow: 'hidden',
  },
]);

export const EditorOptions = style([
  DefaultReset,
  {
    padding: config.space.S200,
  },
]);

// The composer's before | editable | after row. It must NOT wrap: folds'
// Scroll (the editable's wrapper) is `width: 100%`, so a wrapping row always
// breaks into three stacked lines (before / editable / after) — the "wonky"
// phone composer. Narrow viewports keep one row by collapsing the secondary
// buttons behind the "+" overflow instead (RoomInput `compact`).
export const EditorInputRow = style({
  minWidth: 0,
});

export const EditorTextareaScroll = style({});

export const EditorTextarea = style([
  DefaultReset,
  {
    flexGrow: 1,
    height: '100%',
    padding: `${toRem(13)} ${toRem(1)}`,
    '@media': {
      // Phone-width composer rows carry 44px touch targets (MobileTouchTarget),
      // so the row is 60px instead of 48px; pad the text to keep it level with
      // the buttons instead of hugging the top of the row. Only when the row
      // actually has before/after buttons (not the edit-message editor).
      '(max-width: 750px)': {
        selectors: {
          [`${EditorTextareaScroll}:not(:only-child) &`]: {
            paddingTop: toRem(19),
            paddingBottom: toRem(19),
          },
        },
      },
    },
    selectors: {
      [`${EditorTextareaScroll}:first-child &`]: {
        paddingLeft: toRem(13),
      },
      [`${EditorTextareaScroll}:last-child &`]: {
        paddingRight: toRem(13),
      },
      '&:focus': {
        outline: 'none',
      },
    },
  },
]);

export const EditorPlaceholderContainer = style([
  DefaultReset,
  {
    opacity: config.opacity.Placeholder,
    pointerEvents: 'none',
    userSelect: 'none',
  },
]);

export const EditorPlaceholderTextVisual = style([
  DefaultReset,
  {
    display: 'block',
    paddingTop: toRem(13),
    paddingLeft: toRem(1),
    '@media': {
      '(max-width: 750px)': {
        selectors: {
          [`${EditorTextareaScroll}:not(:only-child) &`]: { paddingTop: toRem(19) },
        },
      },
    },
  },
]);

export const EditorToolbarBase = style({
  padding: `0 ${config.borderWidth.B300}`,
});

export const EditorToolbar = style({
  padding: config.space.S100,
});

export const MarkdownBtnBox = style({
  paddingRight: config.space.S100,
});