import {StyleSheet, TextStyle, ViewStyle} from 'react-native';
import {Theme, $Colors} from '../../style';
export interface StepperStyle {
    container: ViewStyle;
    input: TextStyle;
    stepWrap: ViewStyle;
    stepText: TextStyle;
    stepDisabled: ViewStyle;
    disabledStepTextColor: TextStyle;
    highlightStepTextColor: TextStyle;
    highlightStepBorderColor: ViewStyle;
}
export default (theme: Theme) =>
    StyleSheet.create<StepperStyle>({
        container: {
            flex: 1,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'flex-end',
        },
        input: {
            width: 50,
            textAlign: 'center',
            height: 24,
            fontSize: 14,
            color: $Colors.normalText,
        },
        stepWrap: {
            width: 24,
            height: 24,
            borderRadius: 12,
            borderWidth: theme.border_width_md,
            borderColor: theme.brand_primary,
        },
        stepText: {
            textAlign: 'center',
            textAlignVertical: 'center',
            fontSize: 20,
            color: theme.brand_primary,
            height: 24,
            lineHeight: 22,
        },
        stepDisabled: {
            borderColor: theme.color_text_disabled,
        },
        disabledStepTextColor: {
            color: theme.color_text_disabled,
        },
        highlightStepTextColor: {
            color: theme.brand_primary,
        },
        highlightStepBorderColor: {
            borderColor: theme.brand_primary,
        },
    });