@kubit-ui-web/react-components/dist/esm/components/pillSelector/pillSelector.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import styled, { css } from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
export const PillSelectorWrapper = styled.div `
  ${({ styles }) => getStyles(styles?.container)};

  ${({ hasThumb, styles, isSelected }) => hasThumb
    ? css `
          & > :nth-child(2) {
            ${getStyles(styles?.firstPill)};
            ${isSelected && getStyles(styles?.firstPill?.selected)}
          }
          & > :last-child {
            ${getStyles(styles?.lastPill)};
            ${isSelected && getStyles(styles?.lastPill?.selected)}
          }
          & > :not(:last-child, :nth-child(2)) {
            ${getStyles(styles?.pill)};
            ${isSelected && getStyles(styles?.pill?.selected)}
          }
        `
    : css `
          & > :first-child {
            ${getStyles(styles?.firstPill)};
            ${isSelected && getStyles(styles?.firstPill?.selected)}
          }
          & > :last-child {
            ${getStyles(styles?.lastPill)};
            ${isSelected && getStyles(styles?.lastPill?.selected)}
          }
          & > :not(:last-child, :first-child) {
            ${getStyles(styles?.pill)};
            ${isSelected && getStyles(styles?.pill?.selected)}
          }
        `};
`;
export const ThumbStyled = styled.div `
  ${({ styles }) => getStyles(styles?.thumb)};
`;
//# sourceMappingURL=pillSelector.styled.js.map