@use "@core-scss/template/placeholders" as *;
@use "vuetify/lib/styles/tools/elevation" as elevation;
@use "@configured-variables" as variables;

$divider-gap: 0.75rem;

// vertical nav app title
.layout-nav-type-vertical {
  .layout-vertical-nav {
    @include elevation.elevation(3);

    // 👉 Nav header
    .nav-header {
      margin-block-start: variables.$vertical-nav-header-margin-top;

      .app-title-wrapper {
        h1 {
          font-size: 28px;
        }
      }
    }

    .nav-items {
      padding-block-start: 0.25rem;

      // ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
      .ps__thumb-y {
        inline-size: 0.125rem;
      }

      .ps__rail-y.ps--clicking .ps__thumb-y,
      .ps__rail-y:focus > .ps__thumb-y,
      .ps__rail-y:hover > .ps__thumb-y {
        inline-size: 0.375rem;
      }
    }

    // nav-section-title's line
    .title-text {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      column-gap: $divider-gap;

      &::before {
        flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
        content: "";
        margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
      }
    }

    // Active status indicator
    .nav-link .router-link-exact-active,
    .nav-group.active:not(.nav-group .nav-group) > :first-child {
      &::after {
        position: absolute;
        background-color: rgb(var(--v-global-theme-primary));
        block-size: 2.625rem;
        border-end-start-radius: 0.375rem;
        border-start-start-radius: 0.375rem;
        content: "";
        inline-size: 0.25rem;
        inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
      }
    }

    // 👉 Vertical nav link
    .nav-group {
      .nav-link {
        > .router-link-exact-active {
          @extend %nav-link-nested-active;

          // active status indicator removed
          &::after {
            content: none;
          }
        }
      }

      // Active & open states for nav group label
      &.open:not(.active),
      .nav-group.active {
        > :first-child {
          &.nav-group-label {
            svg,
            .nav-item-title {
              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
            }
          }
        }
      }

      // nav-group active
      &.active:not(.nav-group .nav-group) {
        > :first-child {
          @extend %vertical-nav-group-active;
        }
      }
    }
  }
}