import styled from 'styled-components/macro'

export const Group = styled.div`
  padding: 6px;
  display: flex;
  border-radius: 6px;
  background-color: #1C1C1E;
`

type WrapperProps = {
  checked?: boolean,
}

export const RadioWrapper = styled.div<WrapperProps>`
  position: relative;
  flex: 1;
  font-size: 12px;
  border-radius: inherit;
  color: white;
  display: flex;
  align-items: center;
`

export const Label = styled.label`
  display: flex;
  flex-direction: column;
  z-index: 1;
  width: 100%;
  padding: 8px;
  cursor: pointer;
  text-transform: uppercase;
`

export const Input = styled.input.attrs(
  () => ({
    type: 'radio',
  }),
)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  margin: 0;
  transition: background-color 0.3s;
  border-radius: inherit;

  :checked {
    background-color: #45464b;
  }

  :hover {
    background-color: #2c2c30;
  }
`
