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

// Thin banner shown at the very top of the app shell while a share is
// pending. Mounted as the first flex-child of HorseshoeContainer's surface
// (a flex column) so it pushes the entire app — including the nav-tab
// header inside ClientLayout — down by its own height. Not `position:
// fixed` because that would overlay the navigation chrome and trap the
// user on whichever route was active when the share arrived.
//
// `flexShrink: 0` keeps the strip at its natural height even when nested
// scroll containers below try to claim space.
export const Strip = style({
  flexShrink: 0,
  paddingTop: 'env(safe-area-inset-top)',
  background: color.Primary.Container,
  color: color.Primary.OnContainer,
  borderBottom: `${config.borderWidth.B300} solid ${color.Primary.ContainerLine}`,
});

export const Content = style({
  display: 'flex',
  alignItems: 'center',
  gap: toRem(12),
  padding: `${toRem(10)} ${toRem(16)}`,
});

export const TextBlock = style({
  flex: 1,
  minWidth: 0,
  display: 'flex',
  flexDirection: 'column',
  gap: toRem(2),
});
