import { StyleSheet } from "react-native";
import { colors } from "../../constants";
import { rs } from "../../styles/responsive";

export const styles = StyleSheet.create({
  label: {
    color: colors.textPrimary,
    fontFamily: "Inter-Medium",
    fontSize: rs(14),
    lineHeight: rs(26),
    marginTop: rs(6),
    marginBottom: rs(2)
  },
  inputWrap: {
    flexDirection: "row",
    alignItems: "center",
    minHeight: rs(60),
    borderRadius: rs(16),
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.surface,
    paddingRight: rs(12),
    gap: rs(10)
  },
  flagButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: rs(4),
    borderRightWidth: 1,
    borderRightColor: colors.border,
    minWidth: rs(55)
  },
  flagText: {
    fontSize: rs(24)
  },
  dialCodeText: {
    color: colors.textPrimary,
    fontFamily: "Inter-Medium",
    fontSize: rs(18)
  },
  input: {
    flex: 1,
    color: colors.textPrimary,
    fontFamily: "Inter-Medium",
    fontSize: rs(18),
    paddingVertical: rs(10)
  },
  errorText: {
    marginTop: rs(6),
    color: colors.error,
    fontFamily: "Inter-Medium",
    fontSize: rs(13),
    lineHeight: rs(18)
  }
});