'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const SelectorsWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['narrow']),
}) `
  padding: ${(props) => index.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 &&
    styled.css `
        margin-right: ${index.getSpacing('s04')};
      `}
  }

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

exports.SelectorsWrapper = SelectorsWrapper;
