import styled from 'styled-components/macro'

export const Wrapper = styled.span.attrs(() => ({
  role: 'radio',
  tabIndex: 0,
}))``

export const Label = styled.label`
  display: flex;
  align-items: center;
  color: ${({ theme: { colors } }) => colors.text};
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  cursor: pointer;
`

export const Input = styled.input.attrs(() => ({
  'aria-hidden': true,
  tabIndex: -1,
  type: 'radio',
}))`
  position: absolute;
  z-index: -1;
  opacity: 0;
`