@use "@/styles/mixin/mixin.scss" as elevation;

.layout-horizontal-nav {
  position: fixed;
  z-index: 1004;
  background: rgb(var(--v-theme-background));
  border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  inline-size: 100%;
  inset-block-start: 64px;

  .v-btn {
    font-weight: 500;
  }

  .horizontal-nav {
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
  }

  .nav-item.active,
  .nav-item.v-btn--active {
    > .v-btn__overlay {
      opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier)) !important;
    }

    .v-btn__content {
      font-weight: 600;
    }
  }
}

// horizontal nav active item
.horizontal-nav-menu-content,
.horizontal-nav-menu-child-content {
  &,
  .v-list-item-title {
    font-size: 0.875rem;
  }

  .v-list-item {
    .v-list-item__prepend {
      // change the size and color of second steps menus
      i.mdi-circle-outline {
        font-size: 0.75rem !important;

        + .v-list-item__spacer {
          inline-size: 0.375rem;
        }
      }
    }
  }

  .v-list-item-title,
  .nav-group-item {
    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
  }

  .v-list-item--active:not(.nav-group-item) {
    .v-list-item__content,
    .v-list-item-title,
    .v-list-item__prepend,
    .v-list-item__append {
      color: rgb(var(--v-theme-primary)) !important;
      font-weight: 500;
    }
  }
}

@media screen and (width >= 1280px) {
  .layout-page-content {
    &.with-horizontal-nav {
      --v-layout-top: 125px !important;
    }
  }
}
