@fluent-windows/core/es/Radio/Radio.styled.js

React components that inspired by Microsoft's Fluent Design System.

const root = theme => ({
  width: 20,
  height: 20,
  borderRadius: '50%',
  position: 'relative',
  display: 'inline-block',
  border: '2px solid',
  cursor: 'pointer',
  overflow: 'hidden',
  transition: theme.transitions.radio,
  backgroundColor: theme.colors.white.default,
  // checked false
  borderColor: theme.colors.standard.default,
  '&:hover': {
    borderColor: theme.colors.standard.dark1
  },
  // input element
  '& > input': {
    width: '100%',
    height: '100%',
    opacity: 0,
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    cursor: 'pointer'
  }
});

const checked = theme => ({
  borderColor: theme.colors.primary.default,
  '&:hover': {
    borderColor: theme.colors.primary.default
  }
});

const disabled = theme => ({
  backgroundColor: theme.colors.standard.light1,
  borderColor: theme.colors.standard.default,
  cursor: 'not-allowed',
  pointerEvents: 'none',
  '& > input': {
    cursor: 'not-allowed',
    pointerEvents: 'none'
  }
});

const circle = theme => ({
  borderRadius: '50%',
  transition: theme.transitions.radio,
  backgroundColor: theme.colors.black.default,
  position: 'absolute',
  left: '50%',
  top: '50%',
  width: 12,
  height: 12,
  marginLeft: -6,
  marginTop: -6,
  opacity: 0
});

const circleChecked = {
  opacity: 1
};

const circleDisabled = theme => ({
  backgroundColor: theme.colors.standard.dark3
});

export const styles = theme => ({
  root: root(theme),
  checked: checked(theme),
  disabled: disabled(theme),
  circle: circle(theme),
  circleChecked,
  circleDisabled: circleDisabled(theme)
});