/* The wordmark is drawn, not typeset. Keep its proportions and blade cutouts. */
.barberia-wordmark {
  display: inline-block;
  width: 180px;
  max-width: 100%;
  vertical-align: middle;
  line-height: 0;
  flex-shrink: 0;
}
.barberia-wordmark > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.barberia-wordmark > .barberia-wordmark__light {
  display: none;
}
:root[data-theme='light']
  .barberia-wordmark[data-surface='auto']
  > .barberia-wordmark__dark {
  display: none;
}
:root[data-theme='light']
  .barberia-wordmark[data-surface='auto']
  > .barberia-wordmark__light,
.barberia-wordmark[data-surface='light'] > .barberia-wordmark__light {
  display: block;
}
.product-brand .barberia-wordmark,
.brand .barberia-wordmark {
  width: 180px;
}
.dashboard-brand .barberia-wordmark {
  width: 130px;
}
.dashboard-brand > .dashboard-brand__square {
  display: none;
}
.dashboard-app .sidebar-logo .barberia-wordmark {
  width: 184px;
}
.mobile-app-brand .barberia-wordmark {
  width: 130px;
}
.brand-logo .barberia-wordmark {
  width: 280px;
}
.auth-brand {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
}
.auth-brand .barberia-wordmark {
  width: 220px;
}
.login-card > .auth-brand {
  margin-inline: auto;
}
.billing-brand .barberia-wordmark {
  width: 180px;
}
.platform-mobile-brand {
  display: none;
}
@media (max-width: 768px) {
  .platform-mobile-brand {
    display: block;
    position: absolute;
    top: 20px;
    left: 76px;
  }
  .platform-mobile-brand .barberia-wordmark {
    width: 140px;
  }
}
@media (max-width: 980px) {
  .dashboard-brand > .dashboard-brand__square {
    display: block;
  }
  .dashboard-brand .barberia-wordmark {
    display: none;
  }
}
@media (max-width: 768px) {
  .product-brand .barberia-wordmark,
  .brand .barberia-wordmark {
    width: 140px;
  }
  .brand-logo .barberia-wordmark {
    width: 220px;
  }
}
@media (max-width: 380px) {
  .product-brand .barberia-wordmark {
    width: 124px;
  }
}