/* 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);
  --right-side-bg-iterated: var(--surfaces-bg03);
  --slider-rail-bg: var(--primary-100);
  --collapse-icon-bg: var(--primary-500);
  --mantine-radius-default: 0;
}

[data-bs-theme="light"] {
  --dropdown-label-bg: var(--primary-300);
  --left-side-bg: var(--surfaces-bg01);
  --right-side-bg: var(--surfaces-bg01);
  --right-side-bg-iterated: var(--primary-300);
  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
  --slider-rail-bg: var(--primary-900);
  --collapse-icon-bg: var(--primary-300);
  --mantine-radius-default: 0;
}

/* 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(--left-side-bg) !important;
}

.nav-link {
   color: var(--text-secondary) !important;
}

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

/* CARDS */
.card {
  margin: 4px;
}

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

/* FORM ELEMENTS */
.form-check {
    height: 16px;
}

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

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

.container-controls-panel .dropdown {
  max-width: 240px;
  min-width: 160px;
}

.container-controls-panel .form-check-inline {
  align-content: center;
  height: 32px;
}

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

div.form-check.form-switch {
  align-items: start;
  display: flex;
  gap: 8px;
}

/* Eventually bring over to vizro-bootstrap */