.section-announcement-bar-container {
  transition:
    background-color var(--transition),
    color var(--transition);
  background-color: var(--scheme-background-secondary);
}

.section-announcement-bar-container--divider {
  border-block-end: 1px solid var(--scheme-border);
  transition:
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition);
}

.section-announcement-bar-container--divider:has(.section-announcement-bar--hidden) {
  border-block-end: 0;
}

announcement-bar {
  display: block;
  transition: block-size var(--transition);
  overflow: hidden;
  padding-block: var(--space-2);
}

announcement-bar .swiper:not(.swiper-initialized) {
  flex-direction: column;
}

announcement-bar .swiper:not(.swiper-initialized) .swiper-slide:nth-child(n + 2) {
  display: none;
}

.section-announcement-bar-content-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4) var(--space-12);
  padding-block: calc(var(--space-12) - var(--space-2));

  &:has(.section-announcement-bar-content-links--hide-on-mobile) {
    @media (max-width: 767px) {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr auto 1fr;
    justify-content: space-between;

    .section-announcement-bar-content-text {
      grid-column: 2 / 3;
    }

    .section-announcement-bar-content-links {
      grid-column: 3 / 4;
    }
  }

  @media (min-width: 1024px) {
    padding-inline: var(--space-36);
  }
}

.section-announcement-bar-content-container p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: block-axis;
  overflow: hidden;
}

.section-announcement-bar-content-links {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--space-12);

  &.section-announcement-bar-content-links--hide-on-mobile {
    @media (max-width: 767px) {
      display: none;
    }
  }
}

.section-announcement-bar-content-links a {
  white-space: nowrap;

  & + a {
    padding-inline-start: var(--space-12);
    border-inline-start: 1px solid var(--scheme-border);
  }

  &:hover {
    text-decoration: underline;
  }
}