.layout-vertical-nav {
  background-color: rgb(var(--v-theme-background));

  .layout-vertical-nav-list {
    padding-inline: 0.875rem;

    .v-ripple__container {
      display: none;
    }

    .v-list-item {
      border-radius: 0.5rem !important;
      margin-block-end: 0.375rem !important;
    }

    .v-list-subheader {
      font-size: 0.625rem;
    }

    .v-list-item-title {
      font-size: 0.875rem !important;
      font-weight: 400;
      line-height: 1.5rem !important;
    }

    .v-list-item__prepend {
      i.v-icon {
        font-size: 1.25rem;
      }
    }

    a.v-list-item--active.v-list-item--link {
      .v-list-item__prepend,
      .v-list-item__content,
      .v-list-item-title {
        color: rgb(var(--v-theme-primary));
        font-weight: 500;
      }
    }

    // vertical nav group icon
    .v-list-group {
      .v-list-group__items {
        .v-icon--size-default {
          font-size: 0.75rem;
        }
      }

      > .v-list-group__header .navigation-group-handler {
        flex-shrink: 0;
        font-size: 1.375rem;
        transform-origin: center;
        transition: transform 0.15s ease-in-out;
        will-change: transform;
      }

      &.v-list-group--open {
        > .v-list-group__header {
          .navigation-group-handler {
            transform: rotate(90deg);
          }
        }
      }

      // active group
      .v-list-item--active.v-list-group__header {
        background-color: rgba(var(--v-theme-on-background), var(--v-selected-opacity));

        .v-list-item__overlay {
          opacity: 0;
        }

        .v-list-item-title,
        .v-icon {
          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
          font-weight: 500;
        }
      }
    }
  }

  &.v-navigation-drawer--expand-on-hover.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) {
    // remove heading text and add before line
    .v-list-subheader {
      .v-list-subheader__text {
        opacity: 0;
      }

      &::before {
        position: absolute;
        border-radius: 10px;
        margin: auto;
        background: rgba(var(--v-border-color), var(--v-border-opacity));
        block-size: 2px;
        content: "";
        inline-size: 36px;
        inset-inline: 0;
      }
    }

    .layout-vertical-nav-list {
      // list active group children collapse while min variant active
      .v-list-group--open {
        .v-list-group__items {
          display: none;
        }
      }

      // hide the other content on rail mode, only visible icon
      .v-list-item {
        .v-list-item__content,
        .v-list-item__append {
          opacity: 0;
        }
      }
    }
  }

  // hiding text and title when mini variant active and collapsed
  &:not(:hover) {
    .rail-mode-is-on {
      display: none;
    }
  }
}
