import styled from 'styled-components/macro';

/**
 * The component uses overflow is hidden and crop outline of focused elements.
 * I can't find a better solution than adding this offset.
 * It relates with prop 'effects.focus.default' in {@link LibTheme} and can be broken if the outline style will be changed.
 */
const offsetForOutline = 2;

export const StyledList = styled.ul`
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: -${offsetForOutline}px;
  overflow: hidden;
  padding: ${offsetForOutline}px;
`;

/** Large elements of list increase list width, even them hidden. To prevent it, wrap the list into `display: grid` */
export const StyledWrapper = styled.div<{ $minWidth: number }>`
  display: grid;
  min-width: ${({ $minWidth }) => `${$minWidth}px`};
`;