/* Geometry and motion corrections. Glass rendering stays owned by bxw-liquid-glass.css. */

#bxw-root {
  --bxw-panel-motion-y: 10px;
  --bxw-panel-enter-duration: 280ms;
  --bxw-panel-exit-duration: 240ms;
  --bxw-panel-enter-opacity-duration: 220ms;
  --bxw-panel-exit-opacity-duration: 180ms;
  --bxw-panel-motion-ease: cubic-bezier(.23, 1, .32, 1);
}

#bxw-root :is(.bxw-conversation-toggle, .bxw-meet-toggle, :where(#bxw-second-mode-toggle)) {
  left: 50% !important;
  width: 100% !important;
  min-height: var(--bxw-segment-panel-height) !important;
  transform: translate3d(-50%, var(--bxw-panel-motion-y), 0) !important;
  transform-origin: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition-property: opacity, transform, visibility !important;
  transition-duration:
    var(--bxw-panel-exit-opacity-duration),
    var(--bxw-panel-exit-duration),
    0ms !important;
  transition-timing-function:
    var(--bxw-panel-motion-ease),
    var(--bxw-panel-motion-ease),
    linear !important;
  transition-delay: 0ms, 0ms, var(--bxw-panel-exit-duration) !important;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

#bxw-root.bxw-conversation-toggle-visible:not(.bxw-conversation-toggle-scroll-hidden)
  .bxw-conversation-toggle,
#bxw-root.bxw-meet-toggle-visible:not(.bxw-meet-toggle-scroll-hidden)
  .bxw-meet-toggle,
#bxw-root.bxw-second-mode-visible:not(.bxw-second-mode-scroll-hidden)
  #bxw-second-mode-toggle {
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition-duration:
    var(--bxw-panel-enter-opacity-duration),
    var(--bxw-panel-enter-duration),
    0ms !important;
  transition-delay: 0ms !important;
}

#bxw-root.bxw-conversation-toggle-visible.bxw-conversation-toggle-scroll-hidden
  .bxw-conversation-toggle,
#bxw-root.bxw-meet-toggle-visible.bxw-meet-toggle-scroll-hidden
  .bxw-meet-toggle,
#bxw-root.bxw-second-mode-visible.bxw-second-mode-scroll-hidden
  #bxw-second-mode-toggle,
#bxw-root:has(.bxw-rail.bxw-search-open) :is(.bxw-conversation-toggle, .bxw-meet-toggle) {
  transform: translate3d(-50%, var(--bxw-panel-motion-y), 0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition-duration:
    var(--bxw-panel-exit-opacity-duration),
    var(--bxw-panel-exit-duration),
    0ms !important;
  transition-delay: 0ms, 0ms, var(--bxw-panel-exit-duration) !important;
}

@media (min-width: 768px) {
  #bxw-root {
    --bxw-panel-motion-y: -10px;
  }
}

@media (max-width: 767px) {
  #bxw-root {
    --bxw-panel-gap: 8px;
    width: min(calc(100vw - 32px), 560px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  #bxw-root .bxw-rail,
  #bxw-root .bxw-pills,
  #bxw-root .bxw-search-slot {
    box-sizing: border-box;
    transition-property: opacity, transform !important;
    transition-duration: 180ms, 240ms !important;
    transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1) !important;
  }

  #bxw-root {
    transition-property: opacity, transform !important;
    transition-duration: 180ms, 240ms !important;
    transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1) !important;
  }

  #bxw-root .bxw-search-slot > .bxw-location-button {
    bottom: calc(
      100% + var(--bxw-panel-gap) + var(--bxw-segment-panel-height) + var(--bxw-panel-gap)
    ) !important;
    translate: 0 var(--bxw-location-panel-shift-y, 0px) !important;
    transition-property: translate, transform, background-color, border-color, color, filter !important;
    transition-duration:
      var(--bxw-panel-enter-duration),
      160ms,
      200ms,
      200ms,
      200ms,
      200ms !important;
    transition-timing-function:
      var(--bxw-panel-motion-ease),
      cubic-bezier(.23, 1, .32, 1),
      ease,
      ease,
      ease,
      ease !important;
    will-change: translate;
  }

  #bxw-root:is(
    .bxw-conversation-toggle-visible.bxw-conversation-toggle-scroll-hidden,
    .bxw-meet-toggle-visible.bxw-meet-toggle-scroll-hidden,
    .bxw-second-mode-visible.bxw-second-mode-scroll-hidden
  ) .bxw-search-slot > .bxw-location-button {
    --bxw-location-panel-shift-y: calc(
      var(--bxw-segment-panel-height) + var(--bxw-panel-gap)
    );
    transition-duration:
      var(--bxw-panel-exit-duration),
      160ms,
      200ms,
      200ms,
      200ms,
      200ms !important;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-meet-toggle,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ).bxw-panel-toggle {
    width: 100% !important;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ) .toggle-option,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn {
    padding-inline: var(--bxw-segment-option-pad) !important;
  }
}

@media (max-width: 340px) {
  #bxw-root {
    --bxw-segment-label-size: 11px;
    --bxw-segment-icon-size: 16px;
    --bxw-segment-option-gap: 4px;
    --bxw-segment-option-pad: 5px;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ) .bxw-conversation-toggle-icon,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-icon {
    display: block !important;
  }
}

/* Community marker collision state. */
#community-bubble {
  width: var(--bxw-community-expanded-width, 40px);
  min-width: var(--bxw-community-expanded-width, 40px);
  height: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  transition-property: opacity, transform, width, min-width, border-color, background-color, box-shadow;
  transition-duration: 180ms, 240ms, 280ms, 280ms, 180ms, 180ms, 180ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

#community-bubble-icon,
#community-bubble-online {
  transition-property: opacity, transform, filter !important;
  transition-duration: 160ms, 240ms, 160ms !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

#community-bubble-icon.touch-logo,
#community-bubble-icon.touch-logo + #community-bubble-online {
  filter: brightness(0) invert(1) !important;
}

#community-bubble.is-logo-colliding {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#community-bubble.is-logo-colliding #community-bubble-icon,
#community-bubble.is-logo-colliding #community-bubble-online {
  opacity: 0 !important;
  transform: scale(.72) !important;
}

#community-bubble-online {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
  min-width: 16px;
  height: 16px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.bxw-community-metric-current,
.bxw-community-metric-previous {
  grid-area: 1 / 1;
  display: block;
  min-width: 100%;
  text-align: center;
  line-height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #bxw-root :is(.bxw-conversation-toggle, .bxw-meet-toggle, :where(#bxw-second-mode-toggle)) {
    transform: translate3d(-50%, 0, 0) !important;
    transition-property: opacity, visibility !important;
    transition-duration: 100ms, 0ms !important;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1), linear !important;
  }

  #bxw-root.bxw-conversation-toggle-visible.bxw-conversation-toggle-scroll-hidden
    .bxw-conversation-toggle,
  #bxw-root.bxw-meet-toggle-visible.bxw-meet-toggle-scroll-hidden
    .bxw-meet-toggle,
  #bxw-root.bxw-second-mode-visible.bxw-second-mode-scroll-hidden
    #bxw-second-mode-toggle,
  #bxw-root:has(.bxw-rail.bxw-search-open) :is(.bxw-conversation-toggle, .bxw-meet-toggle) {
    transform: translate3d(-50%, 0, 0) !important;
    transition-delay: 0ms, 100ms !important;
  }

  #community-bubble,
  #community-bubble-icon,
  #community-bubble-online {
    transition-duration: 100ms !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  #bxw-root .bxw-search-slot > .bxw-location-button {
    transition-duration: 0ms, 100ms, 100ms, 100ms, 100ms, 100ms !important;
  }
}