@primer/react-brand 0.81.0-rc.b64e5144 → 0.81.0

package/esm/LogoSuite/LogoSuite.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n  padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n  padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) */\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  text-transform: uppercase;\n  color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n  text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n  text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n  padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: var(--brand-LogoSuite-logobar-rowGap);\n  justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n  .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n  + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n  padding-block-start: 0;\n  margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n  width: auto;\n  height: var(--base-size-32);\n}\n\n.LogoSuite__logobar img {\n  display: block;\n}\n\n.LogoSuite__logobar--has-linked-logos :where(a) {\n  color: var(--brand-color-text-default);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n  fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n  filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n  fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n  filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n  justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--justify .LogoSuite__logobar {\n    justify-content: space-between;\n  }\n}\n\n.LogoSuite__logobar a:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n  border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-24);\n  margin: auto;\n  max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: var(--marquee-gap);\n  min-width: 100%;\n  animation-name: LogobarScrollX;\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n  animation-direction: normal;\n  animation-fill-mode: none;\n  animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n  animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: visible;\n  padding-block: var(--base-size-4);\n  user-select: none;\n  gap: var(--marquee-gap);\n  flex: 1;\n  min-width: 0;\n  -webkit-mask-image: linear-gradient(\n    to right,\n    hsl(0 0% 0% / 0),\n    hsl(0 0% 0% / 1) 20%,\n    hsl(0 0% 0% / 1) 80%,\n    hsl(0 0% 0% / 0)\n  );\n  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused * {\n  animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n  animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n  cursor: pointer;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--base-size-48);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-LogoSuite-color-control-rest);\n  transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n  background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n  fill: var(--brand-color-text-muted);\n}\n\n/* Shared gridline variant styles */\n.LogoSuite--gridline,\n.LogoSuite--gridline-expressive {\n  padding: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__content,\n.LogoSuite--gridline-expressive .LogoSuite__content {\n  padding-inline: 0;\n  gap: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__textContainer,\n.LogoSuite--gridline-expressive .LogoSuite__textContainer,\n.LogoSuite--gridline .LogoSuite__logobarContainer,\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n  margin-block-start: auto;\n  padding-block-start: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__heading + .LogoSuite__description,\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline .LogoSuite__logobar--has-marquee,\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n  width: 100%;\n  max-width: none;\n}\n\n/* Gridline variant styles */\n.LogoSuite--gridline .LogoSuite__textContainer {\n  padding: var(--base-size-40) var(--base-size-20) 0;\n}\n\n.LogoSuite--gridline .LogoSuite__logobarContainer {\n  padding: var(--base-size-40) var(--base-size-20) var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--gridline .LogoSuite__textContainer {\n    padding: var(--base-size-48) var(--base-size-40) 0;\n  }\n\n  .LogoSuite--gridline .LogoSuite__logobarContainer {\n    padding: var(--base-size-40) var(--base-size-40) var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 64rem) {\n  .LogoSuite--gridline .LogoSuite__textContainer {\n    padding: var(--base-size-48) var(--base-size-64) 0;\n  }\n\n  .LogoSuite--gridline .LogoSuite__logobarContainer {\n    padding: var(--base-size-48) var(--base-size-64) var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .LogoSuite--gridline .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n/* Gridline expressive variant styles */\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n  padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 91px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-40);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 64rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 0;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    max-width: 1280px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    text-align: left;\n    padding: var(--base-size-64);\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 1281px) {\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  /* When the logobar is the only column visible (no adjacent text), this removes start border */\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n    border-inline-start: none;\n  }\n}\n\n.LogoSuite__logobar--has-takeover {\n  position: relative;\n  overflow: visible;\n}\n\n/* Glass blur overlay effect */\n.LogoSuite__logobar--has-takeover::before {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--base-size-16)) 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  backdrop-filter: blur(var(--base-size-6));\n  -webkit-backdrop-filter: blur(var(--base-size-6));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n  opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n  opacity: 0.7;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 0;\n  visibility: hidden;\n  z-index: 2;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 1;\n  visibility: visible;\n}\n"],"mappings":""}
+{"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n  padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n  padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) */\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  text-transform: uppercase;\n  color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n  text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n  text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n  padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: var(--brand-LogoSuite-logobar-rowGap);\n  justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n  --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n  column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n  .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n  + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n  padding-block-start: 0;\n  margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n  width: auto;\n  height: var(--base-size-32);\n}\n\n.LogoSuite__logobar img {\n  display: block;\n}\n\n.LogoSuite__logobar--has-linked-logos :where(a) {\n  color: var(--brand-color-text-default);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n  fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n  filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) path {\n  fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) img {\n  filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n  justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--justify .LogoSuite__logobar {\n    justify-content: space-between;\n  }\n}\n\n.LogoSuite__logobar a:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n  border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--base-size-24);\n  margin: auto;\n  max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  gap: var(--marquee-gap);\n  min-width: 100%;\n  animation-name: LogobarScrollX;\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n  animation-direction: normal;\n  animation-fill-mode: none;\n  animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n  animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(calc(-100% - var(--marquee-gap)));\n  }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup {\n  animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: visible;\n  padding-block: var(--base-size-4);\n  user-select: none;\n  gap: var(--marquee-gap);\n  flex: 1;\n  min-width: 0;\n  -webkit-mask-image: linear-gradient(\n    to right,\n    hsl(0 0% 0% / 0),\n    hsl(0 0% 0% / 1) 20%,\n    hsl(0 0% 0% / 1) 80%,\n    hsl(0 0% 0% / 0)\n  );\n  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused * {\n  animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee:has(:focus-visible) .LogoSuite__logobar-marqueeGroup {\n  animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n  cursor: pointer;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--base-size-48);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  background-color: var(--brand-LogoSuite-color-control-rest);\n  transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n  background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n  outline: var(--base-size-4) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n  fill: var(--brand-color-text-muted);\n}\n\n/* Shared gridline variant styles */\n.LogoSuite--gridline,\n.LogoSuite--gridline-expressive {\n  padding: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__content,\n.LogoSuite--gridline-expressive .LogoSuite__content {\n  padding-inline: 0;\n  gap: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__textContainer,\n.LogoSuite--gridline-expressive .LogoSuite__textContainer,\n.LogoSuite--gridline .LogoSuite__logobarContainer,\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n  margin-block-start: auto;\n  padding-block-start: 0;\n}\n\n.LogoSuite--gridline .LogoSuite__heading + .LogoSuite__description,\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n  padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline .LogoSuite__logobar,\n.LogoSuite--gridline .LogoSuite__logobar--has-marquee,\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n  width: 100%;\n  max-width: none;\n}\n\n/* Gridline variant styles */\n.LogoSuite--gridline .LogoSuite__textContainer {\n  padding: var(--base-size-40) var(--base-size-20) 0;\n}\n\n.LogoSuite--gridline .LogoSuite__logobarContainer {\n  padding: var(--base-size-40) var(--base-size-20) var(--base-size-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--gridline .LogoSuite__textContainer {\n    padding: var(--base-size-48) var(--base-size-40) 0;\n  }\n\n  .LogoSuite--gridline .LogoSuite__logobarContainer {\n    padding: var(--base-size-40) var(--base-size-40) var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 64rem) {\n  .LogoSuite--gridline .LogoSuite__textContainer {\n    padding: var(--base-size-48) var(--base-size-64) 0;\n  }\n\n  .LogoSuite--gridline .LogoSuite__logobarContainer {\n    padding: var(--base-size-48) var(--base-size-64) var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .LogoSuite--gridline .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n/* Gridline expressive variant styles */\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n  padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 91px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-40);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 64rem) {\n  .LogoSuite--gridline-expressive {\n    padding-inline: 0;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    max-width: 1280px;\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n    text-align: left;\n    padding: var(--base-size-64);\n  }\n\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n    padding: var(--base-size-64);\n  }\n}\n\n@media screen and (min-width: 1281px) {\n  .LogoSuite--gridline-expressive .LogoSuite__content {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\n  /* When the logobar is the only column visible (no adjacent text), this removes start border */\n  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n    border-inline-start: none;\n  }\n}\n\n.LogoSuite__logobar--has-takeover {\n  position: relative;\n  overflow: visible;\n}\n\n/* Glass blur overlay effect */\n.LogoSuite__logobar--has-takeover::before {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--base-size-16)) 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  backdrop-filter: blur(var(--base-size-6));\n  -webkit-backdrop-filter: blur(var(--base-size-6));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n  opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n  opacity: 0.7;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 0;\n  visibility: hidden;\n  z-index: 2;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n  opacity: 1;\n  visibility: visible;\n}\n"],"mappings":""}