import styled, { css } from 'styled-components';
import { convertToTransientProps, getSpacing } from '../../../../utils/index.js';

const SelectorsWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['narrow']),
}) `
  padding: ${(props) => getSpacing('s04', 's04', props.narrow ? 's02' : 's04')};
  border-right: ${(props) => props.narrow ? 'none' : `1px solid rgba(0, 0, 0, 0.08)`};
  border-top: ${(props) => props.narrow ? `1px solid rgba(0, 0, 0, 0.08)` : 'none'};
  display: ${(props) => (props.narrow ? 'flex' : 'block')};
  overflow: auto;

  div {
    ${(props) => props.narrow &&
    css `
        margin-right: ${getSpacing('s04')};
      `}
  }

  & > div {
    margin-bottom: ${getSpacing('s03')};
    white-space: nowrap;
  }
`;

export { SelectorsWrapper };
