<commit_before>import { css } from 'glamor';
import colors from 'Styles/colors';
import variables from 'Styles/variables';

const leftColumnWidth = 72;

const item = css({
  padding: variables.gap.big,
}).toString();

const leftColumn = css({
  width: leftColumnWidth,
}).toString();

const image = css({
  background: colors.placeholder,
  marginBottom: variables.gap.small * 1.25,
  height: leftColumnWidth,
  width: leftColumnWidth,
}).toString();

const content = css({
  display: 'flex',
  flexDirection: 'column',
  paddingLeft: variables.gap.big,
}).toString();

const info = css({
  fontSize: '0.875rem',
  marginTop: variables.gap.big * 0.875,
  marginBottom: variables.gap.small * 0.25,
  flexGrow: 1,
  alignItems: 'flex-end',
  justifyContent: 'space-between',
}).toString();

const priceInfo = css({
  textAlign: 'right',
}).toString();

const disclaimerSpacer = css({
  width: 10,
}).toString();

const price = css({
  marginLeft: '1em',
}).toString();

const properties = css({
  wordBreak: 'break-word',
}).toString();

export default {
  item,
  leftColumn,
  image,
  content,
  info,
  disclaimerSpacer,
  priceInfo,
  price,
  properties,
};<commit_msg>PI-9371: Fixed broken cart layout at long availability texts<commit_after>import { css } from 'glamor';
import colors from 'Styles/colors';
import variables from 'Styles/variables';

const leftColumnWidth = 72;

const item = css({
  padding: variables.gap.big,
}).toString();

const leftColumn = css({
  width: leftColumnWidth,
}).toString();

const image = css({
  background: colors.placeholder,
  marginBottom: variables.gap.small * 1.25,
  height: leftColumnWidth,
  width: leftColumnWidth,
}).toString();

const content = css({
  display: 'flex',
  flexDirection: 'column',
  paddingLeft: variables.gap.big,
}).toString();

const info = css({
  fontSize: '0.875rem',
  marginTop: variables.gap.big * 0.875,
  marginBottom: variables.gap.small * 0.25,
  flexGrow: 1,
  alignItems: 'flex-end',
  justifyContent: 'space-between',
}).toString();

const priceInfo = css({
  textAlign: 'right',
  wordBreak: 'break-word',
}).toString();

const disclaimerSpacer = css({
  width: 10,
}).toString();

const price = css({
  marginLeft: '1em',
  alignSelf: 'flex-end',
}).toString();

const properties = css({
  wordBreak: 'break-word',
  alignSelf: 'flex-start',
  /**
   * When the properties column has content, apply a max width to the price column
   * to avoid issues with long availability texts.
   */
  [`:not(:empty) + .${price}`]: {
    maxWidth: '40%',
  },
}).toString();

export default {
  item,
  leftColumn,
  image,
  content,
  info,
  disclaimerSpacer,
  priceInfo,
  price,
  properties,
};
{'fraction_non_alphanumeric': 0.15683345780433158, 'fraction_numerical': 0.01717699775952203, 'mean_word_length': 4.252941176470588, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2655183', 'n_tokens_mistral': 907, 'n_tokens_neox': 873, 'n_words': 245}