import { buildThemedStyles } from "../AtlantisThemeContext";

export const useStyles = buildThemedStyles(tokens => {
  return {
    container: {
      width: "100%",
      borderColor: tokens["color-border"],
      borderStyle: "solid",
      borderBottomWidth: tokens["border-base"],
      backgroundColor: tokens["color-surface"],
    },
    bannerContent: {
      flexDirection: "row",
      alignItems: "flex-start",
      gap: tokens["space-small"] + tokens["space-smaller"],
    },
    bannerMainContent: {
      flex: 1,
      flexDirection: "row",
      alignItems: "flex-start",
      gap: tokens["space-small"] + tokens["space-smaller"],
      paddingBottom: tokens["space-base"],
      paddingLeft: tokens["space-base"],
      paddingTop: tokens["space-base"],
    },
    bannerMainContentWithoutDismiss: {
      paddingRight: tokens["space-base"],
    },
    contentContainer: {
      flex: 1,
    },
    dismissContainer: {
      paddingBottom: tokens["space-base"],
      paddingRight: tokens["space-base"],
      paddingTop: tokens["space-base"],
    },
    dismissButton: {
      alignSelf: "flex-start",
      alignItems: "center",
      height: tokens["space-large"],
      justifyContent: "center",
      width: tokens["space-large"],
    },
    childrenContainer: {
      marginTop: tokens["space-smallest"],
    },
    textContainer: {
      marginTop: tokens["space-minuscule"],
    },
    fullWidth: {
      width: "100%",
    },
    bannerChildrenContent: {
      marginBottom: tokens["space-small"],
    },
    contentSpacing: {
      gap: tokens["space-small"],
    },
  };
});