/* Nav (Tabs, Pills) - Bootstrap Compatible */

.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2px;

  .nav-link {
    position: relative;
    display: block;
    padding: ~"calc(var(--gutter-size)/2)" var(--gutter-size);
    color: inherit;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 125ms linear;

    &:hover {
      backdrop-filter: brightness(0.9);
    }

    &.disabled {
      opacity: .75;
      filter: blur(2px);
      &:hover,
      &:focus {
        cursor: not-allowed;
      }
    }
  }

  > li {
    > a > img {
      max-width: none;
    }

    li > a, li > .nav-item {
      padding-top: ~"calc(var(--gutter-size)/2)";
      padding-bottom: ~"calc(var(--gutter-size)/2)";
    }

    > ul {
      list-style: none;
      padding: 0;
      > li > a, > li > .nav-item {
        padding-inline-start: ~"calc(var(--gutter-size)*2)";
      }
      > li > ul > li > a, > li > ul > li > .nav-item {
        padding-inline-start: ~"calc(var(--gutter-size)*3)";
      }
      > li > ul > li > ul > li > a, > li > ul > li > ul > li > .nav-item {
        padding-inline-start: ~"calc(var(--gutter-size)*4)";
      }
    }
  }

  &.nav-justified {
    > li {
      flex: 1 0 auto;
      > a, > .nav-item {
        margin-inline-end: 0;
        text-align: center;
        @media (min-width: @media-breakpoint-sm) {
          margin-bottom: 0;
        }
      }
    }
  }

  &.nav-stacked {
    display: flex;
    flex-direction: column;
    li {
      display: block;
      + li > a, + li > .nav-item {
        margin-inline-start: 0;
      }
    }
  }
}

.nav-pills {
  display: inline-flex;

  .nav-link {
    margin: 1px 0;
    background: var(--pills-background-color);


    &:hover {
      filter: brightness(.95);
    }
    &.active {
      background: var(--pills-background-color-active);
      color: var(--pills-text-color);
    }
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  li.opened, .nav-item.opened {
  }

  ul {
    padding: 0;
    .nav-link {
      padding-inline-start: 3em;
    }
    ul .nav-link {
      padding-inline-start: 4.5em;
    }
    ul ul .nav-link {
      padding-inline-start: 6em;
    }
  }
}

html.dark-mode {
  .nav-pills .nav-item:hover {
    filter: brightness(110%);
  }
}

.nav-tabs {
  background: var(--tab-nav-background-color);
  border-bottom: 1px solid var(--tab-border-color);
  padding: ~"calc(var(--gutter-size)/2)" var(--gutter-size);
  padding-bottom: 0;
  color: var(--tab-nav-text-color);

  .nav-link {
    margin-inline-end: 2px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: ~"calc(var(--gutter-size)/3)" ~"calc(var(--gutter-size)/2)";
    color: inherit;
    transition: none;

    &.active {
      background: var(--tab-content-background-color);
      margin-bottom: -1px;
      border: 1px solid var(--tab-border-color);
      border-bottom-color: var(--tab-content-background-color);
    }
  }
}

.tab-content {
  margin: 2em 0;
  background: var(--tab-content-background-color);
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);

  .tab-pane {
    > .title {
     margin-top: 0;
    }
  }
}
