/* This file contains overwrites, which we want to have as defaults for vizro framework
but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough
for a pure Dash app.

All the HEX values starting with --text-code are taken from the Github code highlighting style. */
[data-bs-theme="dark"] {
  --dropdown-label-bg: var(--primary-800);
  --left-side-bg: var(--surfaces-bg02);
  --right-side-bg: var(--surfaces-bg03);
  --text-code-string: #95c2e7;
  --text-code-keyword: #f4766e;
  --text-code-meta: #c8ace1;
  --text-code-type: #f69d50;
  --text-code-literal: #6bb5fd;
  --slider-rail-bg: var(--primary-100);
  --collapse-icon-bg: var(--primary-500);
}

[data-bs-theme="light"] {
  --dropdown-label-bg: var(--primary-300);
  --right-side-bg: var(--surfaces-bg01);
  --left-side-bg: var(--surfaces-bg02);
  --text-code-string: #0a3069;
  --text-code-keyword: #d12d39;
  --text-code-meta: #6f42c1;
  --text-code-type: #f69d50;
  --text-code-literal: #005cc5;
  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
  --slider-rail-bg: var(--primary-900);
  --collapse-icon-bg: var(--primary-300);
}

/* This is currently required as dbc.NavBar comes with the `navbar-light` class even on a dark theme */
.nav-link {
   color: var(--text-secondary) !important;
}

.nav-link:active, .nav-link.active {
    color: var(--text-primary) !important;
}


/* CARDS */
.card {
  height: calc(100% - 8px);
  margin: 4px;
  width: calc(100% - 8px);
}

.card .nav-link {
  height: 100%;
}

.form-check:last-of-type {
  margin-bottom: 0;
}

/* ACCORDION */
.accordion-item .nav-link {
  padding: 0.5rem 1rem;
}

.accordion-item .nav-link.active {
  border-left: 2px solid var(--border-enabled);
}

/* TABS */
.nav-tabs {
  margin-bottom: 1.25rem;
}

.tab-content {
  height: calc(100% - 3.25rem); /* 3.25rem: nav-tabs margin + height */
}

/* The dbc component adds an additional div element to which we cannot assign a className.
To ensure the dynamic height adjustment and prevent scrolling, the height must be specified for that div as below. */
.tab-pane,
.tab-pane > div:first-child {
  height: 100%;
}

/* Hides title of the first container given the title is already reflected in the tab title */
.tab-content .container-title:first-of-type {
  display: none;
}

/* Remove label that automatically gets added when calling `dbc.Switch` to remove gap. */
label[for="theme-selector"] {
  display: none;
}

/* This is currently required as the usage of dbc.NavBar automatically adds classNames such as `navbar-light` and
`bg-light`, which come with an important tag from bootstrap. So we need below to overwrite these properties again. */
.navbar {
  background: var(--surfaces-bg02) !important;
}

.form-switch .form-check-input {
  margin-right: 0;
  padding-left: 0;
}

/* Remove bottom margin of last child as card comes with padding */
.card-text > *:last-child {
  margin-bottom: 0;
}

.container-fluid {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;  /* For a scroll to be properly added per container */
  padding: 0;
}

/* Introduce vizro utility classes here */
.bg-container {
  background: var(--left-side-bg);
}

/* Change filled container bg inside filled container */
.bg-container .bg-container {
  background-color: var(--right-side-bg);
}