 /* Based on:
 https://codepen.io/htmlcssfreebies/pen/WNpVeRK
 https://github.com/pydata/xarray/blob/main/xarray/static/css/style.css
 */

 :root {
    --eh-font-color0: var(--jp-content-font-color0, rgba(0, 0, 0, 1));
    --eh-font-color2: var(--jp-content-font-color2, rgba(0, 0, 0, 0.54));
    --eh-font-color3: var(--jp-content-font-color3, rgba(0, 0, 0, 0.38));
    --eh-border-color: var(--jp-border-color2, #e0e0e0);
    --eh-disabled-color: var(--jp-layout-color3, #bdbdbd);
    --eh-background-color: var(--jp-layout-color0, white);
  }

html[theme=dark],
body[data-theme=dark],
body.vscode-dark {
  --eh-font-color0: rgba(255, 255, 255, 1);
  --eh-font-color2: rgba(255, 255, 255, 0.54);
  --eh-font-color3: rgba(255, 255, 255, 0.38);
  --eh-border-color: #1F1F1F;
  --eh-disabled-color: #515151;
  --eh-background-color: #111111;
}

 /* Reset */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 .eh-description {
    color: var(--eh-font-color2);
 }

 .eh-section {
    padding-left: 0px;
 }

 /* Tabs Container */
 .eh-tabs-container {
     padding: 0px;
 }

 /* Tabs Block */
 .eh-tabs-block {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-top: 4px;
 }

 /* Tabs */
 .eh-tabs {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
 }

 .eh-tabs label {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding-left: 6px;
     padding-right: 6px;
     font-weight: 400;
     cursor: pointer;
     color: var(--eh-font-color2);
     background-color: var(--eh-background-color);
     border-top: 1px solid var(--eh-background-color);
     border-bottom: 1px solid var(--eh-disabled-color);
 }

 /* Tab page contents */
 .eh-tabs .tab {
     flex-grow: 1;
     width: 100%;
     height: 100%;
     display: none;
     padding: 2px 2px;
 }

 .eh-tabs [type=radio] {
     display: none;
 }

 .eh-tabs [type=radio]:checked + label {
     font-weight: 500;
     color: var(--eh-font-color0);
     border: 1px solid var(--eh-disabled-color);
 }

 .eh-tabs [type=radio]:checked + label + .tab {
     display: block;
 }

 .eh-tabs [type=radio]:not(:checked) + label:hover {
    color: var(--xr-font-color0);
 }


 @media (min-width: 768px) {

     .eh-tabs-container {
         padding: 1rem 1rem;
     }

     .eh-tabs label {
         order: 1;
         width: auto;
     }

     .eh-tabs .tab {
         order: 9;
     }

     .eh-tabs [type=radio]:checked + label {
         border-bottom: none;
     }
 }
 @media (min-width: 992px) {

     .eh-tabs {
         width: 800px;
     }
 }
