import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "hsl(221, 39%, 12%)",
  },
  handleBar: {
    backgroundColor: "white",
    padding: 3,
    alignSelf: "center",
    width: 50,
    borderRadius: 10,
    marginVertical: 20,
  },
  participantName: {
    color: "white",
    fontSize: 24,
    fontWeight: "600",
    textAlign: "center",
    marginVertical: 10,
  },
  participantImage: {
    width: "100%",
    height: 300,
    borderRadius: 0,
    alignSelf: "center",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  participantInfoSection: {
    width: "100%",
    height: "auto",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 15,
  },
  participantInfo: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 16,
    textAlign: "center",
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 3,
    backgroundColor: "hsl(0, 0%, 80%)",
    marginHorizontal: 7,
    marginTop: 2,
  },
  performedShowsSection: {
    marginTop: 0,
    width: "100%",
    height: "100%",
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: "hsl(221, 39%, 0%)",
  },
  performedShowsTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "hsl(0, 0%, 80%)",
    marginTop: 154,
  },
});

export default styles;