.container {
  display: flex;
  align-items: center;
  /* Mac's toolbar height */
  height: 52px;

  background-color: rgba(var(--color-base-rgb), 0.7);
  backdrop-filter: blur(20px);

  transition-property: opacity;
  transition-timing-function: var(--ease);
}

.container.hide {
  opacity: 0;
  transition-duration: 0.6s;
}

.container.show {
  opacity: 1;
  transition-duration: 0.2s;
}

.left,
.right {
  flex: 1 1 0px;
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 8px;

  /* Padding for outline to be visible */
  padding: 8px 16px;
}

.left > *,
.right > * {
  flex: 0 0 auto;
}

/* Mac's traffic light + padding - gap
- Don't use .left > padding-left to avoid miscalculating flex layout */
.macPad {
  --a: 20px; /* mac padding */
  --b: 52px; /* mac traffic lights */
  --c: calc(var(--a) + var(--b) + var(--a)); /* mac reserved space */
  --d: 8px; /* toolbar flex gap */
  --e: 16px; /* toolbar padding */
  --f: calc(var(--d) + var(--e)); /* toolbar provided space */
  width: calc(var(--c) - var(--f));
}

.right {
  justify-content: end;
}

.title {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 500;
}
