@font-face {
  font-family: "Builtby Dubbo";
  src: url("../assets/DubboFree-x32GV.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Builtby Plus Jakarta Sans";
  src: url("../assets/PlusJakartaSans-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

builtby-logo-widget {
  display: inline-flex;
  color: inherit;
  vertical-align: middle;
}

.builtby-logo-widget {
  --_builtby-widget-size: var(--builtby-widget-size, 24px);
  --_builtby-widget-brand-size: var(--builtby-widget-brand-size, var(--_builtby-widget-size));
  --_builtby-widget-prefix-size: var(--builtby-widget-prefix-size, calc(var(--_builtby-widget-size) * 0.7708333333));
  --_builtby-widget-suffix-size: var(--builtby-widget-suffix-size, calc(var(--_builtby-widget-size) * 0.7708333333));
  --_builtby-widget-logo-size: var(--builtby-widget-logo-size, calc(var(--_builtby-widget-size) * 1.125));
  --_builtby-widget-prefix-gap: var(--builtby-widget-prefix-gap, calc(var(--_builtby-widget-size) * 0.125));
  --_builtby-widget-suffix-gap: var(--builtby-widget-suffix-gap, calc(var(--_builtby-widget-size) * 0.1041666667));
  --_builtby-widget-logo-gap: var(--builtby-widget-logo-gap, calc(var(--_builtby-widget-size) * 0.1458333333));
  --_builtby-widget-made-by-gap: var(--builtby-widget-made-by-gap, var(--builtby-widget-built-by-gap, 0.06em));
  --_builtby-widget-side-text-height: var(--builtby-widget-side-text-height, calc(var(--_builtby-widget-brand-size) * 0.92));
  --_builtby-widget-side-text-y: var(--builtby-widget-side-text-y, -0.08em);
  --_builtby-widget-muted-strength: var(--builtby-widget-muted-strength, 74%);
  --_builtby-widget-color: var(--builtby-widget-color, currentColor);
  --_builtby-widget-muted: var(
    --builtby-widget-muted,
    color-mix(in srgb, currentColor var(--_builtby-widget-muted-strength), transparent)
  );
  --_builtby-widget-duration: var(--builtby-widget-duration, 260ms);
  --_builtby-widget-fade-duration: var(--builtby-widget-fade-duration, 160ms);
  --_builtby-widget-ease: var(--builtby-widget-ease, cubic-bezier(0.22, 1, 0.36, 1));

  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: max(
    calc(var(--_builtby-widget-brand-size) * 1.34),
    calc(var(--_builtby-widget-logo-size) * 1.08),
    calc(var(--_builtby-widget-prefix-size) * 1.25),
    calc(var(--_builtby-widget-suffix-size) * 1.25)
  );
  color: var(--_builtby-widget-color);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.builtby-logo-widget__mark {
  display: block;
  order: 4;
  width: var(--_builtby-widget-logo-size);
  height: var(--_builtby-widget-logo-size);
  flex: 0 0 auto;
  margin-left: var(--_builtby-widget-logo-gap);
  margin-right: 0;
  object-fit: contain;
}

.builtby-logo-widget[data-logo-side="left"] .builtby-logo-widget__mark,
builtby-logo-widget[logo-side="left"] .builtby-logo-widget__mark {
  order: -1;
  margin-right: var(--_builtby-widget-logo-gap);
  margin-left: 0;
}

.builtby-logo-widget__text {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  transform: translateY(0.035em);
}

.builtby-logo-widget__brand {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  font-family: "Builtby Dubbo", "Builtby Plus Jakarta Sans", sans-serif;
  font-size: var(--_builtby-widget-brand-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.84;
}

.builtby-logo-widget__brand::after {
  content: ".";
}

.builtby-logo-widget__prefix,
.builtby-logo-widget__suffix {
  display: inline-flex;
  align-items: center;
  height: var(--_builtby-widget-side-text-height);
  max-width: 0;
  overflow: hidden;
  color: var(--_builtby-widget-muted);
  font-family: "Builtby Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
  opacity: 0;
  pointer-events: none;
  transition:
    max-width var(--_builtby-widget-duration) var(--_builtby-widget-ease),
    margin var(--_builtby-widget-duration) var(--_builtby-widget-ease),
    opacity var(--_builtby-widget-fade-duration) ease,
    transform var(--_builtby-widget-duration) var(--_builtby-widget-ease);
}

.builtby-logo-widget__prefix {
  gap: var(--_builtby-widget-made-by-gap);
  margin-right: 0;
  font-size: var(--_builtby-widget-prefix-size);
  transform: translate(0.7em, var(--_builtby-widget-side-text-y));
}

.builtby-logo-widget__suffix {
  margin-left: 0;
  font-size: var(--_builtby-widget-suffix-size);
  transform: translate(-0.32em, var(--_builtby-widget-side-text-y));
}

.builtby-logo-widget:hover .builtby-logo-widget__prefix,
.builtby-logo-widget:focus-visible .builtby-logo-widget__prefix,
.builtby-logo-widget[data-reveal] .builtby-logo-widget__prefix,
builtby-logo-widget[reveal] .builtby-logo-widget__prefix {
  max-width: 4.6em;
  margin-right: var(--_builtby-widget-prefix-gap);
  opacity: 1;
  transform: translate(-0.08em, var(--_builtby-widget-side-text-y));
}

.builtby-logo-widget:hover .builtby-logo-widget__suffix,
.builtby-logo-widget:focus-visible .builtby-logo-widget__suffix,
.builtby-logo-widget[data-reveal] .builtby-logo-widget__suffix,
builtby-logo-widget[reveal] .builtby-logo-widget__suffix {
  max-width: 3.2em;
  margin-left: var(--_builtby-widget-suffix-gap);
  opacity: 1;
  transform: translate(0.02em, var(--_builtby-widget-side-text-y));
}

.builtby-logo-widget:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .builtby-logo-widget__prefix,
  .builtby-logo-widget__suffix {
    transition: opacity 120ms ease;
    transform: translate(0, var(--_builtby-widget-side-text-y));
  }

  .builtby-logo-widget:hover .builtby-logo-widget__prefix,
  .builtby-logo-widget:focus-visible .builtby-logo-widget__prefix,
  .builtby-logo-widget[data-reveal] .builtby-logo-widget__prefix,
  builtby-logo-widget[reveal] .builtby-logo-widget__prefix,
  .builtby-logo-widget:hover .builtby-logo-widget__suffix,
  .builtby-logo-widget:focus-visible .builtby-logo-widget__suffix,
  .builtby-logo-widget[data-reveal] .builtby-logo-widget__suffix,
  builtby-logo-widget[reveal] .builtby-logo-widget__suffix {
    transform: translate(0, var(--_builtby-widget-side-text-y));
  }
}
