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

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

export const ThreadIndicator = style({
  opacity: config.opacity.P300,

  selectors: {
    'button&': {
      cursor: 'pointer',
    },
    ':hover&': {
      opacity: config.opacity.P500,
    },
  },
});

// Per-reply quote-bar tint — Reply.tsx sets `--reply-bar-color` inline from
// the reply target's user-hash colour (cssColorMXID). Falls back to the muted
// container line so unresolved replies still look like quotes, not text.
export const ReplyBarColor = createVar();

export const Reply = style({
  vars: {
    [ReplyBarColor]: color.SurfaceVariant.ContainerLine,
  },
  marginBottom: toRem(1),
  minWidth: 0,
  maxWidth: '100%',
  minHeight: config.lineHeight.T300,
  paddingLeft: toRem(8),
  borderLeft: `${toRem(2)} solid ${ReplyBarColor}`,
  selectors: {
    'button&': {
      cursor: 'pointer',
    },
  },
});

export const ReplyContent = style({
  opacity: config.opacity.P300,

  selectors: {
    [`${Reply}:hover &`]: {
      opacity: config.opacity.P500,
    },
  },
});
