/* 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"] {
  --left-side-bg: var(--bs-tertiary-bg);
  --right-side-bg-iterated: var(--bs-body-bg);
  --mantine-radius-default: 0;
  --hover-bg-subtle: var(--bs-gray-900);
}

[data-bs-theme="light"] {
  --left-side-bg: var(--bs-body-bg);

  /* When plugging in other bootstrap variables, surfaces-bg-card does not exist and it will just default to white. */
  --right-side-bg-iterated: var(--surfaces-bg-card);
  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
  --mantine-radius-default: 0;
  --hover-bg-subtle: var(--bs-gray-300);
}

/* 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;
  border: none;
  flex-wrap: nowrap;
}

.nav-link {
   color: var(--bs-body-color) !important;
}

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

/* CARDS */
.card {
  margin: 4px;
  overflow: scroll;
  padding: 0.75rem;
}

.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;
}


.card-nav:hover, .card-nav.hover {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
}

.navbar .nav-link {
  border: none;
  height: 60px;
  padding: 1rem;
  width: 60px;
}

.accordion {
  width: 100%;
}


legend {
  font-size: inherit;
}