import {StyleSheet} from 'react-native';
import {SPACING} from '@shared/theme/spacing';
import {COLORS} from '@shared/colors';

export const FLASH_BUTTON_ACTIVE_COLOR = COLORS.YELLOW_TWO;
export const CAMERA_BUTTON_BACKGROUND_COLOR = COLORS.GRAY_TWENTY_SEVEN;
export const CAMERA_BUTTON_BORDER_COLOR = COLORS.TRANSPARENT_GRAY_TWO;
export const TIMER_TEXT_INPUT_ACTIVE_COLOR = COLORS.RED_TEN;
export const TIMER_TEXT_INPUT_BORDER_COLOR = COLORS.RED_EIGHT;

export const styles = StyleSheet.create({
  controlsTop: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: SPACING.x2,
    position: 'absolute',
    width: '100%',
  },
  controlWrapperTop: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  flashButtonActive: {backgroundColor: COLORS.YELLOW_TWO},
  button: {
    backgroundColor: COLORS.GRAY_TWENTY_SEVEN,
    borderRadius: 100,
    padding: 14,
  },
  timerTextInput: {
    borderRadius: 100,
    borderWidth: 1,
    color: COLORS.WHITE,
    fontVariant: ['tabular-nums'],
    height: 48,
    padding: 14,
    textAlign: 'center',
    width: 70,
  },
});
