import heroVariables from '../global';

const WRAPPER_VERTICAL_MARGIN = heroVariables.MEDIUM_SIZE;
const WRAPPER_VERTICAL_PADDING = heroVariables.SMALL_SIZE;
const LABEL_HORIZONTAL_MARGIN = heroVariables.SMALL_SIZE;
const LABEL_FONT_SIZE = heroVariables.HEADER_4;
const ICON_ACTIVE_COLOR = heroVariables.PRIMARY_COLOR;
const ICON_INACTIVE_COLOR = heroVariables.DISABLED_BACKGROUND_COLOR;

const fontStyles = heroVariables.FONT_FAMILY !== undefined ? { fontFamily: heroVariables.FONT_FAMILY } : {};

const radioStyles = {
  wrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: WRAPPER_VERTICAL_PADDING,
    marginBottom: WRAPPER_VERTICAL_MARGIN,
  },
  label: {
    marginLeft: LABEL_HORIZONTAL_MARGIN,
    fontSize: LABEL_FONT_SIZE,
    ...fontStyles,
  },
  activeIcon: {
    color: ICON_ACTIVE_COLOR,
  },
  inactiveIcon: {
    color: ICON_INACTIVE_COLOR,
  },
} as const;

export default radioStyles;