/* eg-marc-editor background set in parent record.component.css */

.nav-tabs {
  background: var(--bs-body-bg);
  border-color: var(--gray-250);
  padding-inline-start: 0.5rem; /* separate active tab from page background */
}
[data-bs-theme="dark"] :host .nav-tabs {
  border-color: var(--border);
}

.nav-tabs .nav-link {
  background: var(--gray-125);
  border-color: var(--gray-250);
  color: var(--bs-blue-650);
}
[data-bs-theme="dark"] :host .nav-tabs .nav-link {
  background: var(--bs-body-bg-alt);
  border-color: var(--bs-gray-800) var(--bs-gray-800) var(--bs-gray-700);
  color: var(--bs-blue-400);
}

.nav-tabs .nav-link.active {
  background: var(--tab-active-bg);
  color: var(--bs-body-color);
  border-top-color: var(--gray-300);
  border-right-color: var(--gray-400);
  border-bottom-color: var(--gray-100);
  border-left-color: var(--gray-400);
}

[data-bs-theme="dark"] :host .nav-tabs .nav-link.active {
  border-top-color: var(--bs-gray-800);
  border-right-color: var(--bs-gray-700);
  border-bottom-color: var(--bs-gray-900);
  border-left-color: var(--bs-gray-700);
}

.nav-tabs .nav-item:has(.nav-link.active) {
  margin-bottom: -1px;
  position: relative;
  background: var(--gray-125);
}
[data-bs-theme="dark"] :host .nav-tabs .nav-item:has(.nav-link.active) {
  background: var(--bs-body-bg-alt);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background-color: var(--gray-100);
  border-top-color: var(--gray-600);
  border-right-color: var(--gray-600);
  border-bottom-color: var(--gray-125);
  border-left-color: var(--gray-600);
}
[data-bs-theme="dark"] :host .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] :host .nav-tabs .nav-link:focus {
  background-color: var(--bs-body-bg-alt);
  border-top-color: var(--bs-gray-600);
  border-right-color: var(--bs-gray-600);
  border-bottom-color: var(--bs-body-bg-alt);
  border-left-color: var(--bs-gray-600);
}

.btn-destroy {
  background-color: var(--gray-550);
  color: var(--white);
}
[data-bs-theme="dark"] :host .btn-destroy {
  background-color: var(--bs-gray-700);
}

.btn-destroy:hover,
.btn-destroy:focus {
  background-color: var(--danger);
  color: var(--white);
}
[data-bs-theme="dark"] :host .btn-destroy:hover,
[data-bs-theme="dark"] :host .btn-destroy:focus {
  background-color: var(--danger);
  color: var(--white);
}
