import { color, spacing, media } from "@universityofmaryland/web-token-library";
const createElementStyles = (elementName, additionalStyles = {}) => ({
  [`${elementName}:not(:defined)`]: {
    opacity: "0",
    minHeight: "10vh",
    ...additionalStyles.notDefined
  },
  [`${elementName}:defined`]: {
    opacity: "1",
    transition: "opacity 0.2s ease-in-out",
    containerType: "inline-size",
    display: "block",
    ...additionalStyles.defined
  },
  ...additionalStyles.custom
});
const baseElements = [
  "alert-page",
  "alert-site",
  "banner-promo",
  "events-date",
  "logo",
  "nav-slider",
  "media-inline",
  "media-gif",
  "modal",
  "pathway-highlight",
  "person-bio",
  "person-hero",
  "quote",
  "slider-events-feed",
  "slider-events",
  "stat",
  "sticky-columns"
].reduce(
  (acc, name) => ({
    ...acc,
    ...createElementStyles(`umd-element-${name}`)
  }),
  {}
);
const feedElements = [
  "expert-bio",
  "experts-list",
  "experts-grid",
  "expert-in-the-news",
  "events",
  "events-grouped",
  "events-list",
  "in-the-news-grid",
  "in-the-news-list",
  "news",
  "news-list",
  "news-featured"
].reduce(
  (acc, name) => ({
    ...acc,
    ...createElementStyles(`umd-feed-${name}`)
  }),
  {}
);
const elements = {
  ...baseElements,
  ...createElementStyles("umd-element-accordion-item", {
    custom: {
      "umd-element-accordion-item + umd-element-accordion-item": {
        marginTop: spacing.min
      }
    }
  }),
  ...createElementStyles("umd-element-brand-logo-animation", {
    defined: {
      position: "absolute",
      right: "0",
      top: "-3vw",
      height: "25vw",
      zIndex: "9",
      overflow: "clip",
      containerType: "normal",
      [`@media (${media.queries.highDef.min})`]: {
        top: "-11vw",
        height: "50vw"
      }
    }
  }),
  ...["article", "card", "card-icon", "event", "person"].reduce(
    (acc, type) => ({
      ...acc,
      ...createElementStyles(`umd-element-${type}`, {
        custom: {
          [`umd-element-${type}[display="list"] + umd-element-${type}[display="list"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.light}`
          },
          [`umd-element-${type}[display="list"][data-theme="dark"]  + umd-element-${type}[data-theme="dark"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.dark}`
          },
          [`umd-element-${type}[data-display="list"] + umd-element-${type}[data-display="list"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.light}`
          },
          [`umd-element-${type}[data-display="list"][data-theme="dark"] + umd-element-${type}[data-display="list"][data-theme="dark"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.dark}`
          }
        }
      })
    }),
    {}
  ),
  ...["card-video"].reduce(
    (acc, type) => ({
      ...acc,
      ...createElementStyles(`umd-element-${type}`, {})
    }),
    {}
  ),
  ...["card-overlay"].reduce(
    (acc, type) => ({
      ...acc,
      ...createElementStyles(`umd-element-${type}`, {
        custom: {
          [`umd-element-${type}.size-large`]: {
            minHeight: "320px",
            [`@media (${media.queries.tablet.min})`]: {
              minHeight: "560px"
            }
          },
          [`umd-element-${type}[display="list"] + umd-element-${type}[display="list"]`]: {
            marginTop: spacing.md
          },
          [`umd-element-${type}[data-display="list"] + umd-element-${type}[data-display="list"]`]: {
            marginTop: spacing.md
          }
        }
      })
    }),
    {}
  ),
  ...["person"].reduce(
    (acc, type) => ({
      ...acc,
      ...createElementStyles(`umd-element-${type}`, {
        custom: {
          [`umd-element-${type}[data-display="tabular"] + umd-element-${type}[data-display="tabular"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.light}`
          },
          [`umd-element-${type}[data-display="tabular"][data-theme="dark"] + umd-element-${type}[data-display="tabular"][data-theme="dark"]`]: {
            marginTop: spacing.md,
            paddingTop: spacing.md,
            borderTop: `1px solid ${color.gray.dark}`
          }
        }
      })
    }),
    {}
  )
};
const action = createElementStyles("umd-element-call-to-action", {
  defined: {
    containerType: "normal"
  }
});
const breadcrumb = createElementStyles("umd-element-breadcrumb", {
  defined: {
    display: "block",
    marginTop: `${spacing.sm}`
  }
});
const brandCards = createElementStyles("umd-element-brand-card-stack", {
  notDefined: {
    minHeight: `100vh`,
    display: "block",
    opacity: "0"
  },
  defined: {
    containerType: "inline-size",
    display: "block",
    opacity: "1"
  }
});
const carousels = [
  "carousel",
  "carousel-cards",
  "carousel-image",
  "carousel-image-wide",
  "carousel-multiple-image",
  "carousel-people",
  "carousel-thumbnail"
].reduce(
  (acc, element) => ({
    ...acc,
    ...createElementStyles(element, {
      notDefined: {
        minHeight: `80vh`,
        display: "block",
        opacity: "0"
      },
      defined: {
        containerType: "inline-size",
        display: "block",
        opacity: "1"
      }
    })
  }),
  {}
);
const footer = createElementStyles("umd-element-footer", {
  notDefined: {
    backgroundColor: color.black,
    height: `calc(${spacing.md} * 20)`,
    minHeight: "30vh",
    "& > *": { display: "none" }
  }
});
const hero = [
  "umd-element-hero",
  "umd-element-hero-expand",
  "umd-element-hero-logo"
].reduce(
  (acc, element) => ({
    ...acc,
    ...createElementStyles(element, {
      notDefined: {
        minHeight: `50vh`,
        display: "block",
        opacity: "0"
      },
      defined: {
        containerType: "inline-size",
        display: "block",
        opacity: "1"
      }
    })
  }),
  {}
);
const heroLarge = [
  "umd-element-hero-brand-video",
  "umd-element-hero-grid"
].reduce(
  (acc, element) => ({
    ...acc,
    ...createElementStyles(element, {
      notDefined: {
        minHeight: `100vh`,
        display: "block",
        opacity: "0"
      },
      defined: {
        containerType: "inline-size",
        display: "block",
        opacity: "1"
      }
    })
  }),
  {}
);
const heroMinimal = createElementStyles("umd-element-hero-minimal", {
  notDefined: {
    minHeight: `30vh`,
    display: "block",
    opacity: "0"
  },
  defined: {
    containerType: "inline-size",
    display: "block",
    opacity: "1",
    transition: "opacity 0.2s ease-in-out"
  }
});
const layoutExpand = createElementStyles("umd-layout-image-expand", {
  notDefined: {
    minHeight: `100vh`,
    opacity: "0"
  },
  defined: {
    containerType: "inline-size",
    opacity: "1",
    transition: "opacity 0.2s ease-in-out"
  }
});
const pathway = createElementStyles("umd-element-pathway", {
  notDefined: {
    minHeight: `40vh`,
    display: "block",
    opacity: "0"
  },
  defined: {
    containerType: "inline-size",
    display: "block",
    opacity: "1",
    transition: "opacity 0.2s ease-in-out"
  }
});
const navigation = {
  ...["nav-item", "navigation-header"].reduce(
    (acc, name) => ({
      ...acc,
      ...createElementStyles(`umd-element-${name}`, {
        defined: {
          containerType: "normal"
        }
      })
    }),
    {}
  ),
  ...createElementStyles("umd-element-nav-drawer", {
    notDefined: {
      backgroundColor: color.white,
      height: "44px",
      width: "44px",
      "& > *": { display: "none" }
    }
  })
};
const navigationSticky = {
  ...["navigation-sticky"].reduce(
    (acc, name) => ({
      ...acc,
      ...createElementStyles(`umd-element-${name}`, {
        custom: {
          [`umd-element-${name}`]: {
            position: "relative",
            zIndex: "9999"
          }
        }
      })
    }),
    {}
  )
};
const navigationAlertUtility = {
  ...["navigation-utility"].reduce(
    (acc, name) => ({
      ...acc,
      ...createElementStyles(`umd-element-${name}`, {
        notDefined: {
          display: "block !important",
          opacity: "1 !important",
          minHeight: "44px",
          "& > *": { display: "none" }
        },
        defined: {
          "& > *": { display: "block" }
        },
        custom: {
          [`umd-element-${name}`]: {
            minHeight: "44px",
            backgroundColor: color.red
          }
        }
      })
    }),
    {}
  )
};
const scrollTopTag = "umd-element-scroll-top";
const scrollTop = createElementStyles(scrollTopTag, {
  defined: {
    height: "40px",
    width: "40px"
  },
  custom: {
    [`* + ${scrollTopTag}`]: { marginTop: spacing.md },
    [`${scrollTopTag}[fixed], ${scrollTopTag}[data-layout-fixed="true"]`]: {
      position: "fixed",
      right: "8px",
      bottom: "10vh",
      zIndex: "9999",
      [`@media (${media.queries.tablet.min})`]: {
        height: "52px",
        width: "52px",
        right: "40px"
      }
    }
  }
});
const sectionIntro = {
  ...["section-intro-wide", "section-intro"].reduce(
    (acc, name) => ({
      ...acc,
      ...createElementStyles(`umd-element-${name}`, {
        custom: {
          [`umd-element-section-intro-wide + *, umd-element-section-intro + *`]: {
            marginTop: spacing.lg,
            [`@media (${media.queries.tablet.min})`]: {
              marginTop: `${spacing["2xl"]}`
            }
          }
        }
      })
    }),
    {}
  )
};
const socialSharingTag = "umd-element-social-sharing";
const socialSharing = createElementStyles(socialSharingTag, {
  custom: {
    [`* + ${socialSharingTag}`]: { marginTop: spacing.md },
    [`${socialSharingTag}[fixed], ${socialSharingTag}[data-layout-fixed="true"]`]: {
      [`@media (${media.queries.tablet.min})`]: {
        position: "fixed",
        left: "0",
        top: "30vh",
        zIndex: "9999"
      },
      [`@media (${media.queries.desktop.min})`]: {
        left: "40px"
      }
    }
  }
});
const tabsTag = "umd-element-tabs";
const tabs = createElementStyles(tabsTag, {
  custom: {
    [`${tabsTag} + *`]: { marginTop: spacing.lg }
  }
});
const webComponentStyles = {
  ...elements,
  ...feedElements,
  ...action,
  ...breadcrumb,
  ...brandCards,
  ...carousels,
  ...footer,
  ...hero,
  ...heroLarge,
  ...heroMinimal,
  ...layoutExpand,
  ...pathway,
  ...navigation,
  ...navigationSticky,
  ...navigationAlertUtility,
  ...scrollTop,
  ...sectionIntro,
  ...socialSharing,
  ...tabs
};
export {
  webComponentStyles
};
//# sourceMappingURL=web-components.js.map
