/*
 * The bar has a fixed height so the space it needs is known in CSS alone:
 * - --abb-announcement-height: space reserved above the page content.
 * - --abb-announcement-offset: how far the fixed header is pushed down; drops
 *   to 0 once the page is scrolled (--away, set by the inline script in the
 *   template), sliding the bar away.
 * Both stay unset (0) when the bar is absent, closed or expired.
 */

body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])) {
  --abb-announcement-height: 4rem;
  --abb-announcement-offset: var(--abb-announcement-height);

  margin-top: calc(3.375rem + var(--abb-announcement-height));
}

@media all and (width >= 768px) {

body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])) {
    --abb-announcement-height: 3.5rem
}
  }

body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])):has(.abb-header--overlay) {
    margin-top: var(--abb-announcement-height);
  }

body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])):has(.announcement-bar--away) {
    /* Keeps a length (a bare 0 would break calc() in header.pcss). */
    --abb-announcement-offset: calc(var(--abb-announcement-height) * 0);
  }

/* No header slide while the page loads (see .announcement-bar--instant). */

body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])):has(.announcement-bar--instant) .abb-header {
    transition: none;
  }

.announcement-bar {
  /* component variables */
  --announcement-bar-bg: var(--abb-color-scale-900);
  --announcement-bar-color: var(--abb-color-scale-100);
  --announcement-bar-cta-bg: var(--abb-color-brand);
  --announcement-bar-cta-color: var(--abb-color-scale-100);
  /* end: component variables */

  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--abb-announcement-height, 64px);
  padding: 0 calc(var(--dxp-spacing-1) * 7) 0 var(--dxp-spacing-2);
  transition: transform 0.15s linear;
  color: var(--announcement-bar-color);
  background: var(--announcement-bar-bg);
}

@media all and (width >= 768px) {

.announcement-bar {
    justify-content: center;
    padding-left: calc(var(--dxp-spacing-1) * 7);
}
  }

.announcement-bar[hidden] {
    display: none;
  }

.announcement-bar--away {
    transform: translateY(-100%);
  }

.announcement-bar--instant {
    transition: none;
  }

.announcement-bar--brand {
    --announcement-bar-bg: var(--abb-color-brand);
    /* A red button would disappear on the red bar. */
    --announcement-bar-cta-bg: var(--abb-color-scale-100);
    --announcement-bar-cta-color: var(--abb-color-scale-900);
  }

.announcement-bar--light {
    --announcement-bar-bg: var(--abb-color-scale-100);
    --announcement-bar-color: var(--abb-color-scale-900);

    box-shadow: 0 0.0625rem 0 0 rgba(0, 0, 0, 0.12);
  }

/* Full width on small screens so the CTA sits at the right, away from the
     copy; centred with the copy from md. */

.announcement-bar__inner {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    gap: var(--dxp-spacing-2);
  }

@media all and (width >= 768px) {

.announcement-bar__inner {
      flex: initial
  }
    }

@media all and (width >= 1024px) {

.announcement-bar__inner {
      gap: var(--dxp-spacing-3)
  }
    }

/* Label above the headline on small screens, beside it from md. */

.announcement-bar__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--dxp-spacing-1) * 0.5);
    min-width: 0;
  }

@media all and (width >= 768px) {

.announcement-bar__content {
      flex-direction: row;
      align-items: center;
      gap: var(--dxp-spacing-2)
  }
    }

@media all and (width >= 1024px) {

.announcement-bar__content {
      gap: var(--dxp-spacing-3)
  }
    }

.announcement-bar__label {
    font: var(--abb-button-s);
    letter-spacing: 0.045rem;
    text-transform: uppercase;

    display: inline-flex;
    flex: none;
    padding: calc(var(--dxp-spacing-1) * 0.25) var(--dxp-spacing-1);
    text-transform: uppercase;
    border: 0.0625rem solid currentColor;
    border-radius: calc(var(--dxp-spacing-1) * 0.5);
  }

@media all and (width >= 768px) {

.announcement-bar__label {
      padding: calc(var(--dxp-spacing-1) * 0.5) calc(var(--dxp-spacing-1) * 1.5)
  }
    }

.announcement-bar__message {
    font: var(--abb-body-s);

    display: flex;
    align-items: baseline;
    gap: var(--dxp-spacing-3);
    min-width: 0;
    margin: 0;
  }

@media all and (width >= 768px) {

.announcement-bar__message {
      font: var(--abb-body-m)
  }
    }

/* Two lines on small screens, one line below a label or from md, so the
     height stays fixed. */

.announcement-bar__headline {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

@media all and (width >= 768px) {

.announcement-bar__headline {
      -webkit-line-clamp: 1;
  }
    }

.announcement-bar__label + .announcement-bar__message .announcement-bar__headline {
      -webkit-line-clamp: 1;
    }

.announcement-bar__headline-full {
    display: none;
  }

@media all and (width >= 768px) {

.announcement-bar__headline-full {
      display: inline
  }
    }

@media all and (width >= 768px) {

.announcement-bar__headline-mobile {
      display: none
  }
    }

.announcement-bar__text {
    display: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.8;
  }

@media all and (width >= 1024px) {

.announcement-bar__text {
      display: block
  }
    }

.announcement-bar__inner .dxp-button.announcement-bar__cta {
    font: var(--abb-button-m);
    letter-spacing: 0.035rem;
    text-transform: uppercase;

    --button-filled-background-color: var(--announcement-bar-cta-bg);
    --button-filled-label-color: var(--announcement-bar-cta-color);
    --button-hover-color: color-mix(in srgb, var(--announcement-bar-cta-bg) 85%, #000 15%);

    flex: none;
    min-height: 0;
    margin-left: auto;
    padding: calc(var(--dxp-spacing-1) * 1.5) var(--dxp-spacing-3);
    white-space: nowrap;
    text-transform: uppercase;
    gap: var(--dxp-spacing-1);
  }

/* Leave the headline as much room as possible on phones. */

.announcement-bar__inner .dxp-button.announcement-bar__cta .dxp-button__icon {
      display: none;
      margin-left: 0;
    }

@media all and (width >= 768px) {

.announcement-bar__inner .dxp-button.announcement-bar__cta .dxp-button__icon {
        display: flex;
    }
      }

/* Buttons site-wide use a 28px icon (overrides/_button.pcss). */

.announcement-bar__inner .dxp-button.announcement-bar__cta .dxp-button__icon .dxp-icon {
        --icon-size: 1.125rem;
      }

.announcement-bar__close {
    --icon-color: var(--announcement-bar-color);

    position: absolute;
    top: 50%;
    right: var(--dxp-spacing-1);
    display: inline-flex;
    padding: var(--dxp-spacing-1);
    cursor: pointer;
    transform: translateY(-50%);
    color: inherit;
    border: 0;
    background: none;
  }

@media all and (width >= 768px) {

.announcement-bar__close {
      right: var(--dxp-spacing-2);
  }
    }
/* Logged-in users: keep the bar below the admin toolbar, like the header. */
@media all and (width >= 1100px) {
  /* header.pcss reserves the space with padding here instead of margin. */

  body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])):has(.toolbar-horizontal), body:not(.mercury-editor-preview):has(.announcement-bar:not([hidden])):has(.toolbar-tray-horizontal.is-active) {
    margin-top: 0;
  }

  body:has(.toolbar-horizontal) .announcement-bar {
    top: var(--gin-toolbar-y-offset);
  }

  body:has(.toolbar-tray-horizontal.is-active) .announcement-bar {
    top: calc(2 * var(--gin-toolbar-y-offset));
  }
}