.ui-icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-icon .ui-icon { width: 18px; height: 18px; }
.header-icon-button .ui-icon,
.mobile-nav-trigger .ui-icon { width: 19px; height: 19px; }
.account-chevron .ui-icon { width: 15px; height: 15px; }
.account-logout .ui-icon { width: 16px; height: 16px; }
.drawer-close .ui-icon,
.dialog-close .ui-icon { width: 18px; height: 18px; margin: auto; }
.metric-icon .ui-icon,
.action-icon .ui-icon { width: 18px; height: 18px; }
.stat-symbol .ui-icon { width: 19px; height: 19px; }
.empty-state-icon .ui-icon { width: 24px; height: 24px; }
.row-chevron .ui-icon,
.action-item > .ui-icon:last-child { width: 16px; height: 16px; }

.button .ui-icon { width: 15px; height: 15px; }
.button:not(.icon-only) .ui-icon:first-child { margin-right: 6px; }
.button.icon-only { gap: 0; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.text-link .ui-icon,
.card-footer-link .ui-icon { width: 14px; height: 14px; }

.ui-marker-badge {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f2f4f7;
  color: #475467;
}
.ui-marker-badge .ui-icon { width: 17px; height: 17px; }
.ui-marker-badge.tone-blue { color: #1b5f9f; background: #eaf3ff; }
.ui-marker-badge.tone-neutral { color: #667085; background: #f2f4f7; }

.brand-mark-logo {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(14, 38, 79, .18);
}
.brand-mark-logo img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: cover;
}
.hero-brand-logo {
  width: 88px;
  height: 88px;
  display: block;
  margin: 0 0 18px;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(14, 38, 79, .22);
}

.language-switch {
  display: block;
  gap: 0;
}
.app-language {
  margin-left: auto;
}
.language-dropdown {
  position: relative;
  font-size: 12px;
}
.language-dropdown > summary {
  list-style: none;
}
.language-dropdown > summary::-webkit-details-marker {
  display: none;
}
.language-dropdown-trigger {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  cursor: pointer;
  user-select: none;
}
.language-dropdown-trigger:hover,
.language-dropdown[open] .language-dropdown-trigger {
  background: var(--panel-2);
}
.language-flag {
  width: 22px;
  height: 14px;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
}
.language-dropdown-menu {
  position: absolute;
  z-index: 95;
  top: calc(100% + 7px);
  right: 0;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 42px rgba(16, 24, 40, .16);
}
.public-language .language-dropdown-menu {
  right: 0;
  left: auto;
}
.language-dropdown-option {
  min-height: 38px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}
.language-dropdown-option:hover,
.language-dropdown-option.current {
  background: var(--panel-2);
}
.language-dropdown-option.current {
  color: var(--accent-strong);
}
.language-selected-icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.theme-segments button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.theme-segments .ui-icon { width: 15px; height: 15px; }
.settings-drawer-foot .ui-icon { width: 15px; height: 15px; margin-top: 1px; }

.account-quota-meter {
  width: 100%;
  height: 5px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--line);
}
.account-quota-meter::-webkit-meter-bar {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  box-shadow: none;
}
.account-quota-meter::-webkit-meter-optimum-value,
.account-quota-meter::-webkit-meter-suboptimum-value,
.account-quota-meter::-webkit-meter-even-less-good-value {
  border-radius: 999px;
  background: var(--accent);
}
.account-quota-meter::-moz-meter-bar {
  border-radius: 999px;
  background: var(--accent);
}

.pool-create-menu { position: relative; }
.pool-create-trigger { min-width: 148px; }
.pool-create-trigger .dropdown-chevron { margin-right: 0; margin-left: 7px; }
.pool-create-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 7px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 14px 38px rgba(16, 24, 40, .14);
}
.pool-create-popover[hidden] { display: none; }
.pool-create-popover form { margin: 0; }
.pool-create-popover button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.pool-create-popover button:hover { background: var(--panel-2); }

@media (max-width: 700px) {
  .pool-create-menu,
  .pool-create-trigger { width: 100%; }
  .pool-create-popover { left: 0; right: 0; min-width: 0; }

  .language-dropdown-menu {
    right: 0;
    min-width: 168px;
  }
}