// Disable font-ligatures for Chromium based browsers
// Chromium requires `font-variant-ligatures: none` in addition to `font-feature-settings "liga" 0`
* {
  font-feature-settings: 'liga' 0;
  font-variant-ligatures: none;
}

// TODO: Remove when Tabler releases fix for https://github.com/tabler/tabler/issues/2271
// and NetBox upgrades to that version. Fix merged to Tabler dev branch in PR #2548.
:root,
:host {
  @include media-breakpoint-up(lg) {
    margin-left: 0;
    scrollbar-gutter: stable;
  }
}

// Restore default foreground & background colors for <pre> blocks
pre {
  background-color: transparent;
  color: inherit;
}

// Slightly increase alert contrast between bg and text
.alert {
  background: var(--#{$prefix}bg-surface);
}

// Permit copying of badge text
.badge {
  user-select: text;
}

// Button adjustments
.btn {
  // Tabler sets display: flex
  display: inline-block;

  &:focus {
    // Add button focus state
    border: 1px solid var(--tblr-primary-fg);
    outline: 2px solid var(--tblr-primary) !important;
  }
}
.btn-sm {
  // $border-radius-sm (2px) is too small
  border-radius: $border-radius;
}

// Dropdown items
.dropdown-item {
  // Tabler sets display: flex
  display: inline-block;
}

// Set footer icon color
.footer .text-primary {
  color: $rich-black !important;
}

// Tabs
.nav-tabs {
  .nav-link {
    // Tabler sets display: flex
    display: inline-block;
  }
}

// Altering background colors
.page,
.page-tabs .nav-tabs .nav-link.active {
  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
}

// Navigation bar
.navbar {
  // Lighten highlight color of active item
  --tblr-navbar-active-bg: rgba(0, 0, 0, 0.06);
}

// Dark mode colors
@if $enable-dark-mode {
  @include color-mode(dark, true) {
    --#{$prefix}alert-color: darken(var(--#{$prefix}warning), 10%);
    --#{$prefix}link-color: #{$bright-teal};
    --#{$prefix}link-color-rgb: 0, 242, 212;
    --#{$prefix}link-hover-color-rgb: 0, 242, 212;
    --#{$prefix}secondary: #{$gray-400};
    --#{$prefix}primary: #{$bright-teal};
    --#{$prefix}primary-fg: #{$rich-black};
    --#{$prefix}primary-rgb: 0, 242, 212;
    --#{$prefix}btn-active-color: #{$rich-black};
  }
}

// Dark mode overrides
html[data-bs-theme='dark'] {
  // Override background color alpha value
  ::selection {
    background-color: rgba(var(--tblr-primary-rgb), 0.48);
  }

  .btn-primary {
    color: $rich-black !important;
  }

  // Change content color when primary teal changes with theme
  .bg-primary {
    .card-title,
    a,
    i {
      color: $rich-black !important;
    }
  }
  .text-bg-primary {
    color: $rich-black !important;
  }

  // Altering background colors
  .card {
    background: $rich-black !important;
  }

  // Background colors to match brand colors
  background-color: $rich-black;
  .navbar,
  .page-header {
    background-color: $rich-black;
  }
  .page,
  .page-tabs .nav-tabs .nav-link.active {
    background-color: $rich-black-light !important;
  }

  .page-link.active,
  .active > .page-link {
    color: $rich-black;
  }

  // Adjusting text colors
  .text- {
    &bg-primary {
      color: $rich-black !important;
    }
    &muted {
      color: var(--#{$prefix}secondary-color) !important;
    }
    &secondary {
      color: $gray-400 !important;
    }
  }
  .footer .text-primary {
    color: white !important;
  }
  .toast {
    color: var(--#{$prefix}body-color);
  }
  .table-primary {
    --tblr-table-bg: rgba(var(--tblr-secondary-rgb), 0.48);
    --tblr-table-hover-bg: inherit;
    --tblr-table-hover-color: inherit;
  }

  // Tabler bakes a white glyph into the checked data URI, which reads at 1.4:1 against
  // the teal dark-mode primary. A data URI is an isolated document, so the color cannot
  // come from a custom property and has to be baked in at build time.
  .form-check-input:checked[type='checkbox'] {
    --tblr-form-check-bg-image: #{escape-svg(
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$rich-black}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>")
      )};
  }
}

// Do not apply padding to <code> elements inside a <pre>
pre code {
  padding: unset;
}

// Use an icon instead of Tabler's native "caret" for dropdowns (avoids a Safari bug)
.dropdown-toggle:after {
  font-family: 'Material Design Icons';
  content: '\F0140';
  padding-right: 9px;
  border-bottom: none;
  border-left: none;
  transform: none;
  vertical-align: 0.05em;
  height: auto;
}

// Center the accordion chevron inside Tabler's toggle box.
.accordion-button-toggle {
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  > i {
    display: block;
    line-height: 1;
  }
}

// Theme-based visibility utilities
:root:not(.dummy)[data-bs-theme='light'] .hide-theme-light,
:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-dark {
  display: none !important;
}
:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-light,
:root:not(.dummy)[data-bs-theme='light'] .hide-theme-dark {
  display: inline-flex !important;
}
