import styled from 'styled-components';
import { REM_UNIT_SM, COLOR_PRIMARY } from '@vincent_za/styles';

const SIZE = 16;
const BG = '#636363';
export const RADIO_WRAP_CLASSNAME = 'radio-wrap';
export const RADIO_STYLED_CLASSNAME = 'radio-styled';
export const LABEL_CLASSNAME = 'radio-label';

export const Wrap = styled.div`
  display: flex;
  align-items: center;

  ${props => props.isDisabled && `
    opacity: 0.6;
    pointer-events: none;
  `};
`;

export const Label = styled.label`
  margin-right: ${REM_UNIT_SM};
  color: ${props => props.checked ? COLOR_PRIMARY : 'inherit'};
`;

export const RadioWrap = styled.div`
  position: relative;
  width: ${SIZE}px;
  height: ${SIZE}px;

  &:hover {
    .${RADIO_STYLED_CLASSNAME} {
      border-color: ${COLOR_PRIMARY};

      &::before {
        visibility: visible;
        background-color: ${COLOR_PRIMARY};
      }
    }
  }
`;

export const RadioField = styled.input`
  display: none;

  &:checked ~ {
    .${RADIO_STYLED_CLASSNAME} {
      border-color: ${COLOR_PRIMARY};

      &::before {
        visibility: visible;
        width: ${SIZE / 2}px;
        height: ${SIZE / 2}px;
        background-color: ${COLOR_PRIMARY};
      }
    }
  }
`;

export const RadioLabel = styled.label`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;

export const RadioStyled = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid ${BG};
  width: 100%;
  height: 100%;
  border-radius: 50%;

  &::before {
    content: '';
    position: absolute;
    visibility: hidden;
    height: ${SIZE / 4}px;
    width: ${SIZE / 4}px;
    border-radius: 50%;
    background-color: ${BG};
    transition: width 0.1s ease-out, height 0.1s ease-out, background-color 0.1s ease-out;
    pointer-events: none;
  }
`;
