Tweak CSS so language chooser is more obviously a button

Author: cwickham

docs/get-started/_language-chooser.md

@@ -5,12 +5,16 @@
 You can work through this tutorial using R or Python code examples. 
 Select your preferred language:
 
-::: {.panel-tabset group="language"} 
+::: {#language-chooser .panel-tabset group="language"} 
 
 ## R
 
+You've selected to see examples in R. You can toggle to Python whenever you like throughout the guide.
+
 ## Python
 
+You've selected to see examples in Python. You can toggle to R whenever you like throughout the guide.
+
 :::
 
 :::

docs/get-started/positron.css

@@ -1,13 +1,4 @@
-div[data-group="language"] .nav-tabs {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 0;
-}
-
-.callout div[data-group="language"] .nav-tabs {
-  display: flex;
-  justify-content: flex-start;
-}
+/* Styling for all language chooser tabsets */
 
 div[data-group="language"] .tab-content {
   padding: 0;
@@ -16,8 +7,34 @@ div[data-group="language"] .tab-content {
   border: none;
 }
 
+/* Styling for the top language chooser tabset */
+
+div[data-group="language"]#language-chooser .nav-tabs {
+  display: flex;
+  justify-content: flex-start;
+}
+
+div[data-group="language"]#language-chooser  .nav-tabs .nav-link.active, 
+div[data-group="language"]#language-chooser  .nav-tabs .nav-item.show .nav-link {
+  background-color: rgb(80,146,221);
+  color: white;
+}
+
+div[data-group="language"]#language-chooser  .nav-tabs .nav-link:hover { 
+  border-color: rgb(80,146,221);
+} 
+
+
+/* Styling for all but the top language chooser tabset */
+
+div[data-group="language"]:not(#language-chooser) .nav-tabs {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 0;
+}
+
 
-div[data-group="language"] .nav-tabs .nav-link {
+div[data-group="language"]:not(#language-chooser) .nav-tabs .nav-link {
   border: none;
   margin-right: 0;
   margin-top: 0;
@@ -27,13 +44,13 @@ div[data-group="language"] .nav-tabs .nav-link {
 }
 
 
-div[data-group="language"] .nav-tabs .nav-link.active, 
-div[data-group="language"] .nav-tabs .nav-item.show .nav-link {
+div[data-group="language"]:not(#language-chooser) .nav-tabs .nav-link.active, 
+div[data-group="language"]:not(#language-chooser) .nav-tabs .nav-item.show .nav-link {
   border-bottom: solid;
   border-width: 2px;
 }
 
-div[data-group="language"] .nav-tabs .nav-link:hover { 
+div[data-group="language"]:not(#language-chooser) .nav-tabs .nav-link:hover { 
   border-bottom: solid;
   border-color: rgb(80,146,221);
   border-width: 2px;