.topbar {
  display: grid;
  align-items: center;
  gap: min(1.5vw, 3.5rem);
  grid-template: 'announcement' / auto;
  z-index: var(--z-index-sticky);
}

@media (min-width: 960px) {
  .topbar--center {
    grid-template: "socials announcement localization" /minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr)
  }

  .topbar--center.topbar--reversed {
    grid-template: "localization announcement socials" /minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr)
  }

  .topbar--start {
    grid-template: "announcement socials localization" /minmax(0, 1fr) auto auto
  }

  .topbar--start.topbar--reversed {
    grid-template: "announcement localization socials" /minmax(0, 1fr) auto auto
  }

  .topbar--end {
    grid-template: "socials localization announcement" /auto auto minmax(0, 1fr)
  }

  .topbar--end.topbar--reversed {
    grid-template: "localization socials announcement" /auto auto minmax(0, 1fr)
  }

  .topbar--center:not(.topbar--reversed) .localization,
  .topbar--center.topbar--reversed .social-medias,
  .topbar--start:not(.topbar--reversed) .localization,
  .topbar--start.topbar--reversed .social-medias {
    justify-content: flex-end;
  }

  .topbar--start :is(.announcement-bar__group-horizontal, .announcement-bar__group-vertical) .announcement-bar__group-item {
    justify-content: flex-start;
  }

  .topbar--end :is(.announcement-bar__group-horizontal, .announcement-bar__group-vertical) .announcement-bar__group-item {
    justify-content: flex-end;
  }

  .topbar--only {
    grid-template: "announcement" /minmax(0, 1fr)
  }

  .topbar--only .announcement-bar {
    max-width: 100%;
  }
}

.topbar .social-medias {
  grid-area: socials;
}

.topbar .announcement-bar {
  grid-area: announcement;
}

.topbar .localization {
  grid-area: localization;
  gap: min(1.5vw, 3.5rem);
}

.topbar .localization__selector::before {
  content: none;
}

.topbar .localization__selector > .icon {
  inset-inline-end: 0;
}

.topbar .localization__selector > span {
  height: auto;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 20px;
}

.topbar .localization__selector .theme-select__main {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.topbar .contact-information a {
  font-size: inherit;
}

.announcement-bar .rte a {
  font-size: inherit;
  font-weight: calc(var(--sort-body-weight) + 100);
}

.announcement-bar__group-item-inner {
  z-index: var(--z-index-active);
}

.announcement-bar__group-horizontal>.announcement-bar__group-item {
  flex: 0 0 100%;
}

.announcement-bar__carousel-vertical {
  position: relative;
  display: block;
  overflow: hidden;
}

.announcement-bar__carousel-vertical theme-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.announcement-bar__carousel-vertical .announcement-bar__carousel-wrapper {
  height: 100%;
}

.announcement-bar__group-vertical {
  height: 100%;
}

.announcement-bar__group-vertical>* {
  height: 100%;
}

.announcement-bar__button-wrapper {
  inset-inline-start: 50%;
  transform: translateX(calc(-50% * var(--transform-logical)));
}

.announcement-bar__button {
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: var(--z-index-hover);
  color: rgb(var(--color-text));
  background-color: transparent;
  border: none;
}