import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "hsl(221, 39%, 12%)",
  },
  showImage: {
    width: 150,
    height: 150,
    alignSelf: "center",
  },
  showMainInfoSection: {
    width: "auto",
    height: "auto",
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    bottom: 25,
  },
  showInfoText: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 14,
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 3,
    backgroundColor: "hsl(0, 0%, 80%)",
    marginHorizontal: 7,
    marginTop: 2,
  },
  showBannerLogoContainer: {
    width: "100%",
    height: 200,
    alignSelf: "center",
    borderTopLeftRadius: 80,
    borderTopRightRadius: 80,
  },
  showBannerLogo: {
    width: "100%",
    height: "100%",
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
  infoContainner: {
    width: "100%",
    height: "auto",
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: "hsl(221, 39%, 0%)",
    flexDirection: "row",
    gap: 20,
  },
  infoLabel: {
    fontWeight: "300",
    color: "hsl(0, 0%, 80%)",
    fontSize: 16,
  },
  participantsDetailsContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: "hsl(221, 39%, 2%)",
  },
  participantContainer: {
    height: 160,
    width: 110,
    backgroundColor: "hsl(336, 79%, 63%)",
    borderRadius: 10,
  },
  participantSection: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 15,
    paddingLeft: 15,
    paddingTop: 15,
  },
  seasonsSection: {
    width: "100%",
    height: 40,
    backgroundColor: "hsl(221, 39%, 2%)",
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    paddingHorizontal: 20,
  },
  seasonList: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    paddingLeft: 5,
    paddingRight: 5,
  },
  seasonContainer: {
    width: 35,
    height: 35,
    borderRadius: 5,
    backgroundColor: "hsl(0, 0%, 20%)",
    justifyContent: "center",
    alignItems: "center",
  },
  seasonLabel: {
    color: "white",
    fontWeight: "bold",
  },
  participantLabel: {
    color: "white",
    fontWeight: "500",
    textAlign: "center",
    fontSize: 11,
    marginTop: 10,
  },
  seasonsLabel: {
    color: "hsl(0, 0%, 80%)",
    fontWeight: "500",
    fontSize: 16,
  },
  detailTitle: {
    color: "hsl(0, 0%, 100%)",
    fontSize: 14,
    fontWeight: "bold",
    marginTop: 10,
    marginLeft: 20,
    marginBottom: 5,
  },
  detailLabel: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 14,
    lineHeight: 20,
    width: "90%",
    fontWeight: "300",
    marginLeft: 20,
    marginTop: 5,
  },
});
export default styles;