export const ontimeRadio = {
  control: {
    borderColor: '#262626', // $gray-1200
    backgroundColor: '#262626', // $gray-1200
    _checked: {
      borderColor: '#262626', // $gray-1200
      color: '#f6f6f6', // $ui-white
      backgroundColor: '#f6f6f6', // $ui-white
    },
  },
  label: {
    color: '#9d9d9d', // $gray-500, same as placeholder value
    _checked: {
      color: '#f6f6f6', // $gray-200
    },
    _hover: {
      color: '#e2e2e2', // $gray-200
    },
  },
};

export const ontimeBlockRadio = {
  control: {
    borderColor: '#262626', // $gray-1200
    backgroundColor: '#262626', // $gray-1200
    _checked: {
      borderColor: '#262626', // $gray-1200
      color: '#578AF4', // $blue-500
      backgroundColor: '#578AF4', // $blue-500
    },
    _hover: {
      color: '#578AF4', // $blue-500
      backgroundColor: '#578AF4', // $blue-500
      outline: 'none',
    },
  },
  label: {
    fontSize: '0.7em',
    letterSpacing: '0.3px',
    color: '#9d9d9d', // $gray-500
    _checked: {
      color: '#cfcfcf', // $gray-300
    },
    _hover: {
      color: '#e2e2e2', // $gray-200
    },
  },
};
