# All files / components/BulkSelect/styles BulkSelectItem.js

0% Statements 0/1
0% Branches 0/2
0% Functions 0/1
0% Lines 0/1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

     import styled, { css } from 'styled-components';
    import get from 'extensions/themeGet';

    export default styled.div`
      padding: ${get('spacing.small')} ${get('spacing.medium')};
      background: ${get('colors.background.default')};
      color: ${get('colors.text.default')};
      border-color: ${get('colors.border.medium')};
      border-width: ${get('thicknesses.normal')};
      border-style: solid;
      border-radius: 3px;
      cursor: pointer;
      margin: ${get('spacing.small')} calc(${get('spacing.small')} / 2);
      display: flex;

      ${({ selected }) =>
        selected
          ? css`
              background: ${get('colors.primary.default')};
              color: ${get('colors.text.inverted')};
              border-color: ${get('colors.primary.default')};
            `
          : ''} &:hover {
        background: ${get('colors.primary.light')};
        color: ${get('colors.text.default')};
      }
    `;