/*
    See the JupyterLab Developer Guide for useful CSS Patterns:
    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

/* Light theme muted pastels - tuned to read as soft tints on both the
   white stock bar and the mid-grey bars of darker light themes */
:root {
  --jp-colourful-tab-rose: #e8bbc6;
  --jp-colourful-tab-peach: #ddc2a7;
  --jp-colourful-tab-lemon: #ccc8a6;
  --jp-colourful-tab-mint: #b3cdb1;
  --jp-colourful-tab-sky: #a5cce5;
  --jp-colourful-tab-lavender: #cfc1e1;

  /* Active (selected) tab - a little darker and more saturated */
  --jp-colourful-tab-rose-active: #e39fb1;
  --jp-colourful-tab-peach-active: #d2ab82;
  --jp-colourful-tab-lemon-active: #bab56d;
  --jp-colourful-tab-mint-active: #87c086;
  --jp-colourful-tab-sky-active: #77bae0;
  --jp-colourful-tab-lavender-active: #bfa9da;
}

/* Dark theme muted colours */
[data-jp-theme-light='false'] {
  --jp-colourful-tab-rose: #4e3138;
  --jp-colourful-tab-peach: #4e4032;
  --jp-colourful-tab-lemon: #4e4b32;
  --jp-colourful-tab-mint: #324e37;
  --jp-colourful-tab-sky: #28394d;
  --jp-colourful-tab-lavender: #40324e;

  /* Darker shades for the active (selected) tab */
  --jp-colourful-tab-rose-active: #3a2328;
  --jp-colourful-tab-peach-active: #3a3126;
  --jp-colourful-tab-lemon-active: #3a3825;
  --jp-colourful-tab-mint-active: #253b2a;
  --jp-colourful-tab-sky-active: #1d2a38;
  --jp-colourful-tab-lavender-active: #30253a;
}

/* Colour selection menu */
.jp-colourful-tab-menu {
  position: fixed;
  z-index: 10000;
  background-color: var(--jp-layout-color1);
  border: 1px solid var(--jp-border-color1);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  min-width: 140px;
  padding: 4px 0;
}

.jp-colourful-tab-menu-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--jp-ui-font-color1);
}

.jp-colourful-tab-menu-item:hover {
  background-color: var(--jp-layout-color2);
}

.jp-colourful-tab-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
  border: 1px solid var(--jp-border-color2);
}

/* Swatch colours */
.jp-colourful-tab-swatch-rose {
  background-color: var(--jp-colourful-tab-rose);
}

.jp-colourful-tab-swatch-peach {
  background-color: var(--jp-colourful-tab-peach);
}

.jp-colourful-tab-swatch-lemon {
  background-color: var(--jp-colourful-tab-lemon);
}

.jp-colourful-tab-swatch-mint {
  background-color: var(--jp-colourful-tab-mint);
}

.jp-colourful-tab-swatch-sky {
  background-color: var(--jp-colourful-tab-sky);
}

.jp-colourful-tab-swatch-lavender {
  background-color: var(--jp-colourful-tab-lavender);
}

/* Tab colours - apply to tab, inner elements, and shadow DOM parts.
   Inner elements are painted only inside a dock tab: the same class sits on
   the current panel's jp-toolbar, where a descendant rule would also paint
   every button and suppress its hover and pressed fills (DEF-TOOL-10). */
.jp-colourful-tab-rose,
.lm-TabBar-tab.jp-colourful-tab-rose * {
  background-color: var(--jp-colourful-tab-rose) !important;
}

.jp-colourful-tab-rose::part(positioning-region) {
  background-color: var(--jp-colourful-tab-rose) !important;
}

.jp-colourful-tab-peach,
.lm-TabBar-tab.jp-colourful-tab-peach * {
  background-color: var(--jp-colourful-tab-peach) !important;
}

.jp-colourful-tab-peach::part(positioning-region) {
  background-color: var(--jp-colourful-tab-peach) !important;
}

.jp-colourful-tab-lemon,
.lm-TabBar-tab.jp-colourful-tab-lemon * {
  background-color: var(--jp-colourful-tab-lemon) !important;
}

.jp-colourful-tab-lemon::part(positioning-region) {
  background-color: var(--jp-colourful-tab-lemon) !important;
}

.jp-colourful-tab-mint,
.lm-TabBar-tab.jp-colourful-tab-mint * {
  background-color: var(--jp-colourful-tab-mint) !important;
}

.jp-colourful-tab-mint::part(positioning-region) {
  background-color: var(--jp-colourful-tab-mint) !important;
}

.jp-colourful-tab-sky,
.lm-TabBar-tab.jp-colourful-tab-sky * {
  background-color: var(--jp-colourful-tab-sky) !important;
}

.jp-colourful-tab-sky::part(positioning-region) {
  background-color: var(--jp-colourful-tab-sky) !important;
}

.jp-colourful-tab-lavender,
.lm-TabBar-tab.jp-colourful-tab-lavender * {
  background-color: var(--jp-colourful-tab-lavender) !important;
}

.jp-colourful-tab-lavender::part(positioning-region) {
  background-color: var(--jp-colourful-tab-lavender) !important;
}

/* Active widget's toolbar - matches the active tab's distinct shade.
   applyToolbarColour only ever tints the visible (current) panel's toolbar,
   so a coloured jp-toolbar is always the active one. Scoped to jp-toolbar so it
   overrides the base ::part shade for the toolbar without touching tabs, keeping
   the strip below the active tab the same shade as the tab (regression from the
   1.1.5 active-tab shade, which moved the tab but left the toolbar on base). */
jp-toolbar.jp-colourful-tab-rose,
jp-toolbar.jp-colourful-tab-rose::part(positioning-region) {
  background-color: var(--jp-colourful-tab-rose-active) !important;
}

jp-toolbar.jp-colourful-tab-peach,
jp-toolbar.jp-colourful-tab-peach::part(positioning-region) {
  background-color: var(--jp-colourful-tab-peach-active) !important;
}

jp-toolbar.jp-colourful-tab-lemon,
jp-toolbar.jp-colourful-tab-lemon::part(positioning-region) {
  background-color: var(--jp-colourful-tab-lemon-active) !important;
}

jp-toolbar.jp-colourful-tab-mint,
jp-toolbar.jp-colourful-tab-mint::part(positioning-region) {
  background-color: var(--jp-colourful-tab-mint-active) !important;
}

jp-toolbar.jp-colourful-tab-sky,
jp-toolbar.jp-colourful-tab-sky::part(positioning-region) {
  background-color: var(--jp-colourful-tab-sky-active) !important;
}

jp-toolbar.jp-colourful-tab-lavender,
jp-toolbar.jp-colourful-tab-lavender::part(positioning-region) {
  background-color: var(--jp-colourful-tab-lavender-active) !important;
}

/* Active (selected) tab - distinct shade so the selected tab stands out.
   Darker than the inactive shade in both themes. */
.lm-mod-current.jp-colourful-tab-rose,
.lm-mod-current.jp-colourful-tab-rose * {
  background-color: var(--jp-colourful-tab-rose-active) !important;
}

.lm-mod-current.jp-colourful-tab-peach,
.lm-mod-current.jp-colourful-tab-peach * {
  background-color: var(--jp-colourful-tab-peach-active) !important;
}

.lm-mod-current.jp-colourful-tab-lemon,
.lm-mod-current.jp-colourful-tab-lemon * {
  background-color: var(--jp-colourful-tab-lemon-active) !important;
}

.lm-mod-current.jp-colourful-tab-mint,
.lm-mod-current.jp-colourful-tab-mint * {
  background-color: var(--jp-colourful-tab-mint-active) !important;
}

.lm-mod-current.jp-colourful-tab-sky,
.lm-mod-current.jp-colourful-tab-sky * {
  background-color: var(--jp-colourful-tab-sky-active) !important;
}

.lm-mod-current.jp-colourful-tab-lavender,
.lm-mod-current.jp-colourful-tab-lavender * {
  background-color: var(--jp-colourful-tab-lavender-active) !important;
}

.jp-colourful-tab-menu-clear {
  border-top: 1px solid var(--jp-border-color1);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--jp-ui-font-color2);
}

/* Menu icon colours - use CSS variables for theme awareness */
.jp-colourful-tab-icon-rose .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-rose);
}

.jp-colourful-tab-icon-peach .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-peach);
}

.jp-colourful-tab-icon-lemon .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-lemon);
}

.jp-colourful-tab-icon-mint .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-mint);
}

.jp-colourful-tab-icon-sky .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-sky);
}

.jp-colourful-tab-icon-lavender .jp-colourful-tab-icon-rect {
  fill: var(--jp-colourful-tab-lavender);
}