/*
 * Keep inbox settings drawers visually aligned with the profile settings
 * drawer. This narrow production override is mirrored in InboxSettings.tsx.
 */
html:not(.shell-dark) .inbox-ui-toolbar-title {
  color: #333 !important;
  text-shadow: none !important;
}

.inbox-main-buttons-inner {
  overflow: hidden !important;
}

html:not(.shell-dark) .inbox-main-buttons .main-buttons-item-link {
  color: #525c69 !important;
}

html:not(.shell-dark) .inbox-main-buttons .main-buttons-item-link:hover,
html:not(.shell-dark) .inbox-main-buttons .main-buttons-item-link:focus-visible,
html:not(.shell-dark) .inbox-main-buttons .main-buttons-item-active .main-buttons-item-link {
  color: #333 !important;
}

.inbox-side-panel-label {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 767px) {
  .inbox-main-buttons-inner {
    flex-wrap: wrap !important;
  }

  .inbox-main-buttons .main-buttons-item {
    flex: 1 1 25% !important;
  }
}