:root {
  --ds-nav-active-bg: var(--bg-accent-03);
  --ds-nav-active-color: var(--green-60);
  --theme-toggle-selected-background: var(--green-20);
  --ds-nav-content-bg-secondary: var(--bg-light-secondary);
  --table-icon-bg-hover: 27 34 44;
  --themed-dashboard-popover-bg: var(--bg-dark-primary);
  --themed-dashboard-popover-color: var(--content-primary-dark);
  --themed-dashboard-popover-link-color: var(--link-ui-dark);
  --themed-dashboard-popover-link-hover-color: var(--link-ui-hover-dark);
  --themed-dashboard-popover-link-visited-color: var(--link-ui-visited-dark);
  --ds-nav-color-scheme: light;

  @include theme('default') {
    --ds-nav-active-bg: var(--green-70);
    --ds-nav-active-color: var(--green-10);
    --theme-toggle-selected-background: var(--green-70);
    --ds-nav-content-bg-secondary: var(--bg-dark-secondary);
    --table-icon-bg-hover: 255 255 255;
    --themed-dashboard-popover-bg: var(--bg-light-primary);
    --themed-dashboard-popover-color: var(--content-primary);
    --themed-dashboard-popover-link-color: var(--link-ui);
    --themed-dashboard-popover-link-hover-color: var(--link-ui-hover);
    --themed-dashboard-popover-link-visited-color: var(--link-ui-visited);
    --ds-nav-color-scheme: dark;
  }
}

body {
  --ds-nav-bg-color: var(--bg-primary-themed);
  --ds-nav-hover-bg: var(--bg-secondary-themed);
  --ds-nav-color: var(--content-secondary-themed);
}

.user-ds-nav-page {
  @include full-height-stacked-page;

  color-scheme: var(--ds-nav-color-scheme);
  color: var(--content-secondary-themed);

  // NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update
  --navbar-btn-padding-h: var(--spacing-06);
  --navbar-subdued-padding: calc(
      var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
    )
    calc(var(--navbar-btn-padding-h) + 1px);

  .navbar-default {
    position: relative;

    .navbar-header .navbar-logo {
      @include media-breakpoint-up(md) {
        position: relative;
        top: var(--spacing-05);
      }
    }

    .nav-item-users {
      display: none !important;
    }

    @include media-breakpoint-up(lg) {
      .nav-item-account,
      .nav-item-help {
        display: none;
      }
    }

    @include media-breakpoint-down(lg) {
      --navbar-hamburger-submenu-item-hover-color: var(--content-primary);
      --navbar-hamburger-submenu-item-hover-bg: var(--bg-light-secondary);
      --navbar-subdued-hover-color: var(--content-primary);
      --navbar-link-hover-color: var(--content-primary);
      --navbar-link-hover-bg: var(--bg-light-secondary);
      --navbar-subdued-hover-bg: var(--bg-light-secondary);
      --navbar-hamburger-submenu-bg: none;

      .nav-item-help::before {
        content: '';
        display: block;
        border-top: 1px solid var(--border-divider-themed);
        margin: var(--spacing-07) var(--spacing-06);
      }

      #navbar-main-collapse {
        padding: var(--spacing-09) var(--spacing-06) 0;

        .navbar-nav {
          > li {
            > a,
            > .dropdown-toggle,
            > .nav-link {
              border-radius: var(--border-radius-medium);

              &.show {
                background-color: var(--ds-nav-active-bg);
                color: var(--ds-nav-active-color);
              }
            }
          }
        }
      }
    }
  }

  .navbar-nav > li > .dropdown-toggle::after {
    display: none;
  }

  .user-list-wrapper {
    background-color: var(--ds-nav-bg-color);
    flex-grow: 1;
    display: flex;
    overflow-y: hidden;

    .user-list-sidebar-wrapper-react {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 0 0 15%;
      max-width: 320px;
      min-width: 200px;
      margin-top: var(--spacing-03);
      padding: var(--spacing-08) 0 0 0;

      .create-account-button-wrapper {
        padding: 0 var(--spacing-08) var(--spacing-05) var(--spacing-05);
        border-bottom: solid 1px transparent;

        &.show-shadow {
          border-bottom-color: var(--border-divider-themed);
        }
      }

      nav {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
      }

      .user-list-sidebar-scroll {
        flex: 1 1 auto;
        overflow: auto;
        margin: 0 var(--spacing-02) 0 0;
        padding: var(--spacing-05) var(--spacing-07) var(--spacing-05)
          var(--spacing-05);
      }

      .ds-nav-sidebar-lower {
        padding: var(--spacing-05) var(--spacing-08) 0 var(--spacing-05);
        border-top: solid 1px transparent;

        &.show-shadow {
          border-top-color: var(--border-divider-themed);
        }
      }
    }

    hr {
      border-top: 1px solid var(--border-divider-themed);
    }

    ul.user-list-filters {
      margin-bottom: 0;

      hr {
        margin: var(--spacing-05) 0;
      }

      > li {
        > button {
          width: 100%;
          text-align: left;
          color: var(--ds-nav-color);
          background: none;
          border-radius: var(--border-radius-medium);
          border: none;
          padding: var(--spacing-04) var(--spacing-05);
        }

        &:hover button {
          background-color: var(--ds-nav-hover-bg);
        }

        &.active button {
          background-color: var(--ds-nav-active-bg);
          color: var(--ds-nav-active-color);
          font-weight: bold;
        }
      }

      .dropdown-header {
        font-weight: bold;
        color: var(--ds-nav-color);
      }

      > li.tag {
        button.tag-name {
          padding-right: var(--spacing-08) !important;
        }
      }

      .tag-menu {
        button.dropdown-toggle {
          border-radius: var(--border-radius-full);
          border: none;
          color: var(--ds-nav-color);
          height: 20px;
          width: 20px;
          padding: 0;

          &::after {
            display: none;
          }

          &:hover,
          &:active,
          &[aria-expanded='true'] {
            background-color: var(--neutral-20);
          }
        }
      }
    }

    .user-ds-nav-main {
      min-height: 100%;
      padding: var(--spacing-08) var(--spacing-06);

      @include media-breakpoint-up(md) {
        padding: var(--spacing-08);
      }
    }

    .user-dash-table {
      .btn-link {
        color: var(--content-secondary-themed);
        height: var(--spacing-08);
        width: var(--spacing-08);
        border-radius: 100%;
        padding: var(--spacing-01) 0 0;
        vertical-align: middle;

        &:hover,
        &:focus {
          background-color: rgb(var(--table-icon-bg-hover) / 8%) !important;
        }
      }

      .dash-cell-name a {
        color: var(--content-primary-themed) !important;
      }
    }

    .user-ds-nav-content-and-messages {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      > * {
        @include media-breakpoint-up(md) {
          border-left: 1px solid var(--border-divider-themed);
        }
      }

      .user-ds-nav-content {
        flex-grow: 1;
        overflow-y: auto;
        position: relative;
        background-color: var(--ds-nav-content-bg-secondary);

        @include media-breakpoint-up(md) {
          border-top-left-radius: var(--border-radius-large);
          border-top: 1px solid var(--border-divider-themed);
        }
      }

      .cookie-banner {
        position: static;

        // Remove the parts of the shadow that stick out of the sides
        clip-path: inset(-13px 0 0 0);

        // Prevent the cookie banner being overlaid on top of the navigation
        z-index: auto;
      }
    }

    .btn-link {
      --link-color: var(--link-web-themed);
      --link-hover-color: var(--link-web-hover-themed);
    }
  }

  .ds-nav-icon-dropdown {
    .dropdown-toggle {
      color: var(--ds-nav-color);
      background: none;
      height: 44px;
      width: 44px;
      padding: 0;
      overflow: hidden;

      &:hover {
        background-color: var(--ds-nav-hover-bg);
      }

      &.show {
        background-color: var(--ds-nav-active-bg);
        color: var(--ds-nav-active-color);
      }

      &::after {
        display: none;
      }

      > div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .material-symbols {
        vertical-align: middle;
      }
    }
  }

  .ds-nav-ds-name {
    color: var(--ds-nav-color);
    margin-bottom: var(--spacing-05);

    span {
      text-transform: uppercase;
      font-weight: bold;

      @include body-xs;
    }
  }

  .add-affiliation {
    color: var(--ds-nav-color);
  }
}

.theme-toggle {
  display: flex;
  justify-content: space-between;
  cursor: default !important;
  align-items: center;

  &:hover {
    background-color: transparent !important;
    color: var(--content-primary-themed);
  }

  legend {
    font-size: var(--font-size-02);
    line-height: var(--line-height-02);
    margin-bottom: 0;
  }
}

.theme-toggle-radios {
  display: flex;
  border-radius: var(--border-radius-full);
  background-color: var(--bg-secondary-themed);
  padding: var(--spacing-01);
  gap: var(--spacing-01);
}

.theme-toggle-radio {
  display: flex;

  input {
    all: unset;
  }

  label {
    display: flex;
    padding: var(--spacing-03);
    margin-bottom: 0;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    color: var(--content-primary-themed);
  }

  .material-symbols {
    font-size: var(--font-size-03);
  }

  input:checked + label {
    background-color: var(--theme-toggle-selected-background);
  }
}