@use "vuetify/lib/styles/tools/elevation" as elevation;
@use "@/plugins/vuetify/@core/scss/base/placeholders" as *;
@use "@/plugins/vuetify/@core/scss/template/placeholders" as *;

.layout-wrapper.layout-nav-type-horizontal {
  .layout-navbar-and-nav-container {
    @extend %default-layout-horizontal-nav-navbar-and-nav-container;
  }

  // 👉 Navbar
  .layout-navbar {
    @extend %default-layout-horizontal-nav-navbar;
  }

  // 👉 Layout content container
  .navbar-content-container {
    display: flex;
    align-items: center;
    block-size: 100%;
  }

  .layout-horizontal-nav {
    @extend %default-layout-horizontal-nav-nav;

    .nav-items {
      @extend %default-layout-horizontal-nav-nav-items-list;
    }
  }

  // 👉 App footer
  .layout-footer {
    @at-root {
      .layout-footer-sticky#{&} {
        background-color: rgb(var(--v-theme-surface));

        @include elevation.elevation(3);
      }
    }
  }

  // TODO: Use Vuetify grid sass variable here
  .layout-page-content {
    padding-block: 1.5rem;
  }
}
