/* =========================================
   Core Toolbar Container
   ========================================= */

.twnnToolbar {
  /* add global toolbar styling here if needed */
}

/* Sticky variant for Drive app toolbar */
.twnnDriveAppToolbar {
  position: sticky;
  top: var(--twnn-nav-height, 0px);
  z-index: 5;
  background-color: #2b3035;
  width: 100%;              /* make it match the page width */
}

/* =========================================
   Layout: Buttons + Panels
   ========================================= */

.twnnToolbar .buttonsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  width: 100%;              /* fill parent */
  max-width: 100%;          /* don't exceed it */
  box-sizing: border-box;   /* include padding in that width */
}

.twnnToolbar .panelsContainer {
  /* your existing styling, if any */
}

.twnnToolbar .panelsVisibleContainer {
  /* your existing styling, if any */
}

/* =========================================
   Base Button Styles (ALL toolbar buttons)
   ========================================= */

/* All logical toolbar buttons should have this class.
   Your JS already adds .twnn-toolbar-button in registerToolbarButtons().
*/
.twnnToolbar .twnn-toolbar-button {
  background-color: #2b3035;
  border-radius: 8px;
  font-size: 10px;
  border: 1px solid purple;
  color: #adb5bd;

  padding: 4px 8px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}

/* Active state */
.twnnToolbar .twnn-toolbar-button.is-active {
  background-color: var(--twnn-toolbar-active-bg, #444);
  color: var(--twnn-toolbar-active-fg, #fff);
}

/* If you had this before, you can remove or keep it.
   Leaving it here for compatibility, but .twnn-toolbar-button is preferred.
*/
.twnnToolbar .buttonsContainer button {
  background-color: #2b3035;
  border-radius: 8px;
  font-size: 10px;
  border-color: purple;
  color: #adb5bd;
}

/* =========================================
   DROPDOWN SUPPORT (used by twnnSocialShare, etc.)
   ========================================= */

/* Wrapper that lives inside .buttonsContainer */
.twnnToolbar .twnn-toolbar-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown button – this ALSO has .twnn-toolbar-button,
   so it inherits the normal toolbar button look.
*/
.twnnToolbar .twnn-toolbar-button-dropdown {
  /* extra tweaks if you want */
}

/* Dropdown menu that overlays under the button */
.twnnToolbar .twnn-toolbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  display: none; /* toggled by JS */
  z-index: 9999;

  background-color: #2b3035;
  border: 1px solid purple;
  border-radius: 4px;
  min-width: max-content;
  white-space: nowrap;
  padding: 4px 0;
}

/* Items inside the dropdown (e.g. social share platforms) */
.twnnToolbar .twnn-social-share-item {
  display: block;
  width: 100%;
  padding: 4px 10px;
  background: none;
  border: none;
  text-align: left;
  font-size: 10px;
  color: #adb5bd;
  cursor: pointer;
}

.twnnToolbar .twnn-social-share-item:hover {
  background-color: #444;
}

/* Optional: if you want to visually indicate the dropdown is open */
.twnnToolbar .twnn-toolbar-dropdown.is-open .twnn-toolbar-button-dropdown {
  background-color: var(--twnn-toolbar-active-bg, #444);
  color: var(--twnn-toolbar-active-fg, #fff);
}