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

export const FOCUS_RING_SIZE = 80;

export const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.TRUE_BLACK,
    flex: 1,
  },
  flex: {flex: 1},
  center: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  text: {color: COLORS.WHITE},
  // Focus ring is absolutely positioned via translateX/Y in animated style
  focusRing: {
    backgroundColor: COLORS.TRANSPARENT,
    borderColor: COLORS.WARNING,
    borderRadius: 0,
    borderWidth: 1,
    height: FOCUS_RING_SIZE,
    position: 'absolute',
    width: FOCUS_RING_SIZE,
  },
  focusRingLine: {
    backgroundColor: COLORS.WARNING,
    height: 1,
    position: 'absolute',
    width: 6,
  },
  focusRingLineLeft: {
    left: 0,
    top: FOCUS_RING_SIZE / 2,
  },
  focusRingLineRight: {
    right: 0,
    top: FOCUS_RING_SIZE / 2,
  },
  focusRingLineTop: {
    height: 6,
    left: FOCUS_RING_SIZE / 2,
    top: 0,
    width: 1,
  },
  focusRingLineBottom: {
    bottom: 0,
    height: 6,
    left: FOCUS_RING_SIZE / 2,
    width: 1,
  },
});
