export const LabelText = styled.div.attrs({
  className: 'label-text',
  role: 'label',
}) `
  margin-left: $spacing;
  @font (16,semi);
  color: $colors-blackrabbit;
  user-select: none;
  display: inline-block;
  line-height: 2rem;

  /* could pass the active prop to but meh */
  .active & {
    color: $colors-secondary;
  }
`

// @todo - use atoms/Text
export const Text = styled.span.attrs({
  className: 'label-text-style',
}) `
  display: inline-flex;
  color: inherit;

  ${props =>
    props.count &&
    styled.css `
      opacity: 0.8;
      /* padding-left: $spacing-extra-small; */
    `};
`

export const Image = styled.img.attrs({
  src: props => props.image,
}) `
  display: inline-flex;
  width: rem(20);
  height: rem(15);
  margin: rem(0) rem(5);
`