import n from"style-inject";var t='.banner {\n  width: content-box;\n}\n.banner .banner--content {\n  display: grid;\n  position: relative;\n  padding: 24px;\n  border-radius: 8px;\n  grid-gap: 8px;\n  justify-content: start;\n  column-gap: 24px;\n  align-content: center;\n  background-color: var(--primary-background-hover-color);\n  color: var(--color-content-primary);\n}\n.banner .banner--content .banner--close {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.banner .banner--content.close-button-spacing {\n  padding-right: 32px;\n}\n.banner .banner--content.image-position__left, .banner .banner--content.image-position__right {\n  grid-auto-rows: auto;\n  grid-auto-columns: auto;\n}\n.banner .banner--content.image-position__left {\n  grid-template-areas: "image  title    title   " "image  subtitle subtitle";\n}\n.banner .banner--content.image-position__right {\n  grid-template-areas: "title    title     image" "subtitle subtitle  image";\n}\n.banner .banner--content.image-position__bottom, .banner .banner--content.image-position__top {\n  grid-auto-rows: auto;\n  grid-template-columns: repeat(1, 1fr);\n}\n.banner .banner--content.image-position__top {\n  grid-template-areas: "image" "title" "subtitle";\n}\n.banner .banner--content.image-position__bottom {\n  grid-template-areas: "title" "subtitle" "image";\n}\n.banner .banner--content .banner--title {\n  align-self: end;\n  margin: 0;\n  grid-area: title;\n  height: 32px;\n  font-size: 24px;\n  font-weight: 500;\n  letter-spacing: -0.2px;\n  max-width: 782px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.banner .banner--content .banner--subtitle {\n  color: var(--color-content-primary);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-paragraph);\n  margin: 0;\n  grid-area: subtitle;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  white-space: initial;\n}\n.banner .banner--content .banner--image {\n  align-self: center;\n  justify-self: center;\n  grid-area: image;\n  width: 100px;\n  height: 100px;\n  border-radius: 8px;\n  object-fit: contain;\n}\n.banner.rtl .banner--content {\n  text-align: right;\n}\n.banner.rtl .banner--content .banner--close {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: auto;\n}\n.banner.rtl .banner--content.close-button-spacing {\n  padding-left: 32px;\n}\n.banner.rtl .banner--content.image-position__left {\n  grid-template-areas: "image  title    title" "image  subtitle subtitle";\n}\n.banner.rtl .banner--content.image-position__right {\n  grid-template-areas: "title    title     image" "subtitle subtitle  image";\n}\n.banner .banner--content .banner--title {\n  font-family: var(--title-font-family);\n}';n(t,{insertAt:"top"});export{t as default};
