import styled from 'styled-components/macro';

import { color, shadow } from '../../theme';

export const StyledRadioInput = styled.input`
  appearance: none;
  cursor: pointer;
  height: 16px;
  margin: 0;
  margin-right: 0;
  outline: none;
  padding: 0;
  position: relative;
  width: 16px;

  &:before {
    background-color: ${color('sys/color/white')};
    border: 1px solid ${color('sys/color/input/border/default')};
    border-radius: 8px;
    box-sizing: border-box;
    content: '';
    display: block;
    height: 16px;
    position: absolute;
    width: 16px;
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:disabled:before {
    background-color: ${color('ref/palette/gray/50')};
    border-color: ${color('sys/color/input/border/disabled')};
  }

  &:disabled:after {
    background-color: ${color('sys/color/input/border/disabled')};
  }

  &:checked:not(:disabled):before {
    border-color: ${color('sys/color/input/border/focus')};
  }

  &:checked:after {
    border-radius: 4px;
    box-sizing: border-box;
    content: '';
    display: block;
    height: 8px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 8px;
  }

  &:checked:not(:disabled):after {
    background-color: ${color('sys/color/input/border/focus')};
  }

  &:hover:not(:disabled):before {
    border-color: ${color('sys/color/input/border/focus')};
  }

  &:focus:not(:disabled):before {
    border-color: ${color('sys/color/input/border/focus')};
    box-shadow: ${shadow('sys/shadow/focus')};
  }
`;