/* A logo at a fixed height (live site: .tt-logo-item, 2.5rem). Narrower than
   its logo, the box shrinks and the image scales down inside it with
   object-fit: contain, so it keeps its proportions. */
.Inn8SsZnlL4YGk8w3GCH {
  --_h: var(--tt-logo-height, 2.5rem);
  /* Balanced sizing (see Logo.tsx): 3:1 is the reference shape. */
  --_ratio: 3;
  --_balance: var(--tt-logo-balance, 1);

  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: var(--_h);
  /* Browsers without pow() keep the plain height above. */
  height: calc(var(--_h) * clamp(0.7, pow(calc(3 / var(--_ratio)), calc(0.4 * var(--_balance))), 1.3));
  color: inherit;
  text-decoration: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-height="small"] { --_h: 1.6rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="regular"] { --_h: 2.5rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="medium"] { --_h: 3rem; }
.Inn8SsZnlL4YGk8w3GCH[data-height="large"] { --_h: 3.5rem; }

.t0W1rYskRxyjmi7RlKID {
  display: block;
}

.Inn8SsZnlL4YGk8w3GCH [data-part="image"] {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--transition-base, 0.25s ease), opacity var(--transition-base, 0.25s ease);
}

.Inn8SsZnlL4YGk8w3GCH [data-part="placeholder"] {
  width: calc(var(--_h) * 3);
  height: 100%;
  border-radius: 0.3rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Muted via filter, so the original colors return on hover. */
.Inn8SsZnlL4YGk8w3GCH[data-color="muted"] [data-part="image"] {
  filter: grayscale(1);
  opacity: 0.6;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="muted"]:hover [data-part="image"] {
  filter: none;
  opacity: 1;
}

/* One color: the image stays for size and alt text but is see-through; a
   layer on top paints --_fill through the image's shape (--_mask, set
   inline). Same box and contain fit as the image, so they line up. */
.Inn8SsZnlL4YGk8w3GCH[data-filled] {
  --_fill: currentColor;

  position: relative;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled] [data-part="image"] {
  opacity: 0;
}

.Inn8SsZnlL4YGk8w3GCH[data-filled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_fill);
  -webkit-mask: var(--_mask) center / contain no-repeat;
  mask: var(--_mask) center / contain no-repeat;
  pointer-events: none;
}

.Inn8SsZnlL4YGk8w3GCH[data-color="brand"] { --_fill: #4c39f9; }
.Inn8SsZnlL4YGk8w3GCH[data-color="purple"] { --_fill: var(--purple-600, #6f00ff); }
.Inn8SsZnlL4YGk8w3GCH[data-color="black"] { --_fill: var(--black-a-100, #0d0d0d); }
.Inn8SsZnlL4YGk8w3GCH[data-color="white"] { --_fill: var(--white-a-100, #fff); }