import { styled } from 'styleh-components'

const IconWrapper = styled.div `
  display: flex;
  margin-right: 10px;
  align-items: baseline;
`

const SwitchIconWrapper = styled.div.attrs({
  'data-qa': 'qa-toggle-switch',
}) `
  display: flex;
  align-items: start;

  ${props =>
    props &&
    props.isSelected &&
    styled.css `
      color: #0772b4;
    `};
`

// @todo import CommonState for typings
const SwitchLabel = styled.label<{ isSelected: boolean }> `
  font-size: 1rem;
  font-weight: 500;
  margin-left: rem(10);
`

export { IconWrapper, SwitchIconWrapper, SwitchLabel }