/* Language tab above the tryit code area, and its dropdown.
   Chrome matches .editor-tab, the file tab on the practice problem pages
   (practice/practice.php). */

/* On the split editors the tab lives in .trytopnav so it straddles the
   toolbar's bottom edge -- #container clips anything that reaches up out of
   the code pane. JS sets left so it tracks the editor pane, and decides
   whether the tab shows at all from the room actually left between the
   toolbar's controls; a width breakpoint cannot see the splitter position. */
.ws-langtab-wrap {
  position: absolute;
  bottom: 3px;
  left: 0;
  z-index: 4;
}

/* Editors that show their files as tabs put the language tab in that strip,
   right-aligned beside them. z-index clears #resttab (1) and .tabitem (2). */
.ws-langtab-strip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 3;
}
.ws-langtab-strip .ws-langtab {
  padding: 0 12px;
}

/* Editors with no toolbar (the SQL one) put the tab in the normal flow
   instead, at the head of their editor panel. */
.ws-langtab-inline-wrap {
  position: relative;
  bottom: auto;
  left: auto;
  display: inline-block;
  vertical-align: bottom;
}

/* The tab and the panel's heading share one line, sitting on a common bottom
   edge, with the tab resting directly on the editor below. */
.ws-langtab-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 10px 0 0 0;
}
.ws-langtab-row h3 {
  margin: 0;
}
/* The editor sits beside the floated "Get your own server" button and, being
   a block formatting context, narrows to avoid it. Clearing the float keeps
   it full width. */
.ws-langtab-row ~ textarea,
.ws-langtab-row ~ .CodeMirror {
  clear: both;
}
/* Clearance leaves the editor 2px below the row. Shift the tab onto it
   visually; moving it in the flow would carry the editor down with it. */
.ws-langtab-row .ws-langtab-inline-wrap {
  top: 2px;
}

.ws-langtab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 41px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background-color: #ffffff;
  color: #1f2937;
  cursor: pointer;
  font: 600 14px 'Segoe UI', Arial, sans-serif;
  white-space: nowrap;
}
.ws-langtab:hover {
  background-color: #f0f0f0;
}
.ws-langtab:focus-visible {
  outline: 2px solid #04AA6D;
  outline-offset: 2px;
}
.ws-langtab svg {
  width: 20px;
  height: 20px;
}
/* .trytopnav sets "button {color:#999}" on its own controls; this outranks it
   so the caret is not greyed out. */
.trytopnav .ws-langtab {
  color: #1f2937;
}
.ws-langtab-caret {
  display: inline-block;
  width: 10px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: #9ca3af;
}
.darktheme .ws-langtab-caret {
  color: #64748b;
}

/* Fixed, and on <body>, so neither .trytopnav's overflow:hidden nor
   #container's overflow:auto can clip it. JS sets top and left. */
.ws-langmenu {
  position: fixed;
  z-index: 6;
  width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/* In the hamburger the list expands in the menu's own flow, under its row,
   rather than floating over the page. The hamburger stays white in both
   themes, so these rows keep dark text. */
.ws-langmenu-inline {
  position: static;
  width: auto;
  max-height: 260px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
.ws-langmenu-inline .ws-langmenu-item {
  padding-left: 52px;
  color: #000000;
}
.ws-langmenu-inline .ws-langmenu-item:hover {
  background-color: #f1f1f1;
  color: #000000;
}

.ws-langmenu-item {
  display: block;
  padding: 8px 16px;
  border-left: 4px solid transparent;
  color: #000;
  font-family: "Segoe UI", -apple-system, Arial, Verdana, sans-serif;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.ws-langmenu-item:hover {
  background-color: #f1f1f1;
  color: #000;
}
.ws-langmenu-item:focus-visible {
  outline: 2px solid #04AA6D;
  outline-offset: -2px;
}
.ws-langmenu-current {
  border-left-color: #04AA6D;
}

.ws-langmenu-icon,
#langMenuItemIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 0;
  vertical-align: middle;
}
.ws-langmenu-icon {
  margin-right: 12px;
}
.ws-langmenu-icon svg,
#langMenuItemIcon svg {
  width: 20px;
  height: 20px;
}

/* The hamburger's own rows set their icon box with .fa's 26px glyph plus its
   10px padding, which lands the label at 68px. Match that footprint so this
   row's icon and text line up with the rest of the menu. */
#langMenuItem {
  display: flex;
  align-items: center;
  gap: 6px;
}
#langMenuItemIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin: 0;
}

.darktheme .ws-langtab {
  background-color: #15202b;
  color: #e2e8f0;
}
.darktheme .trytopnav .ws-langtab {
  color: #e2e8f0;
}
.darktheme .ws-langtab:hover {
  background-color: #1b2733;
}
/* Only the floating copy follows the editor's dark theme. The inline one
   lives in the hamburger, which stays light. */
.darktheme .ws-langmenu:not(.ws-langmenu-inline) {
  background-color: rgb(21,32,43);
  border: 1px solid #444;
}
.darktheme .ws-langmenu:not(.ws-langmenu-inline) .ws-langmenu-item {
  color: #dddddd;
}
.darktheme .ws-langmenu:not(.ws-langmenu-inline) .ws-langmenu-item:hover {
  background-color: #38444d;
  color: #dddddd;
}