@use "@/styles/mixin/mixin";

.v-theme-skins-modern {
  /* Main content start */
  .layout-page-content {
    --v-layout-top: 80px !important;

    .layout-page-content-wrapper {
      block-size: calc(100% - 92px);
    }
  }

  /* Main content end */

  /* Vertical Nav start */
  .layout-vertical-nav.v-navigation-drawer {
    border: none;
    background-color: transparent !important;
    box-shadow: none !important;

    .v-navigation-drawer__content {
      @include mixin.elevation(2);

      border-radius: 0.625rem;
      background-color: rgba(var(--v-theme-surface)) !important;
      margin-block: 1rem;
      margin-inline-start: 1rem;
    }
  }

  /* Vertical Nav end */

  /* Navbar start */
  .layout-navbar.v-app-bar {
    overflow: visible;
    border-block-end: none !important;
    box-shadow: none;
    padding-block-start: 1rem;

    .v-toolbar__content {
      overflow: visible;

      .navbar-wrapper {
        border-radius: 0.625rem;
        background-color: rgba(var(--v-theme-surface));
        block-size: 100%;
        padding-inline: 16px;

        @include mixin.elevation(2);
      }
    }
  }

  /* Navbar end */

  /* Footer start */
  .v-footer.v-layout-footer {
    padding-block-end: 1rem;

    .v-footer-content {
      padding: 1rem;
      border-radius: 0.625rem;
      background-color: rgba(var(--v-theme-surface));

      @include mixin.elevation(2);
    }
  }

  /* Footer end */

  /* Horizontal Nav start */
  &.v-theme-horizontal-nav {
    .layout-horizontal-nav {
      border-block-end: 0;
      inset-block-start: 64px + 16px;
      padding-block: 0;
      padding-inline: 1.25rem;

      .horizontal-nav {
        @include mixin.elevation(2);

        background-color: rgba(var(--v-theme-surface));
        border-end-end-radius: 0.625rem;
        border-end-start-radius: 0.625rem;
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
    }
  }

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

    &.v-theme-horizontal-nav {
      .layout-navbar {
        overflow: hidden;

        .v-toolbar__content {
          .navbar-wrapper {
            border-end-end-radius: 0;
            border-end-start-radius: 0;
          }
        }
      }
    }
  }

  /* Horizontal Nav end */

  // box layout and footer
  @media (width >= 1280px) {
    &.v-application-box-layout {
      .layout-horizontal-nav,
      .v-footer {
        --box-layout-width: 1400px;
      }
    }
  }
}
