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

export const styles = StyleSheet.create({
	root: {
		flex: 1,
	},
	backdropDim: {
		...StyleSheet.absoluteFillObject,
		backgroundColor: "rgba(0, 0, 0, 0.45)",
	},
	sheetAlign: {
		...StyleSheet.absoluteFillObject,
		justifyContent: "flex-end",
	},
	bottomSheet: {
		backgroundColor: colors.surface,
		borderTopLeftRadius: rs(20),
		borderTopRightRadius: rs(20),
		paddingHorizontal: rs(18),
		paddingTop: rs(10),
		overflow: "hidden",
		flexDirection: "column",
		width: "100%",
	},
	handle: {
		alignSelf: "center",
		width: rs(60),
		height: rs(5),
		borderRadius: rs(8),
		backgroundColor: colors.border,
		marginBottom: rs(20),
	},
	list: {
		flex: 1,
		minHeight: 0,
	},
	sheetTitle: {
		color: colors.textPrimary,
		fontSize: rs(18),
		fontWeight: "600",
		marginBottom: rs(12),
	},
	searchInput: {
		minHeight: rs(46),
		borderWidth: 1,
		borderColor: colors.border,
		borderRadius: rs(12),
		paddingHorizontal: rs(12),
		color: colors.textPrimary,
		fontSize: rs(14),
		marginBottom: rs(10),
	},
	countryRow: {
		flexDirection: "row",
		alignItems: "center",
		minHeight: rs(52),
		borderRadius: rs(10),
		paddingHorizontal: rs(10),
	},
	countryRowSelected: {
		backgroundColor: colors.selectedBg,
	},
	countryFlag: {
		fontSize: rs(20),
		marginRight: rs(10),
	},
	countryName: {
		flex: 1,
		color: colors.textPrimary,
		fontSize: rs(16),
	},
	countryDialCode: {
		color: colors.textMuted,
		fontSize: rs(16),
	},
});