// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
.scrollable-content {
  &.v-navigation-drawer {
    .v-navigation-drawer__content {
      display: flex;
      overflow: hidden;
      flex-direction: column;
    }
  }
}

// ℹ️ adding styling for code tag
code {
  border-radius: 3px;
  background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
  color: currentcolor;
  font-size: 85%;
  font-weight: 400;
  padding-block: 0.2em;
  padding-inline: 0.4em;
}

%blurry-bg {
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
  isolation: isolate;

  @media (width >= 1280px) and (hover: hover) {
    background: rgba(var(--v-theme-background), 1);

    .v-theme--transparent & {
      backdrop-filter: blur(var(--transparent-blur-light, 5px));
      background: rgba(var(--v-theme-background), var(--transparent-opacity-light, 0.1)) !important;
    }
  }

  @media (width < 1280px), (hover: none) {
    background: transparent;

    &::before {
      position: absolute;
      z-index: -1;
      backdrop-filter: blur(24px);
      block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
      content: "";
      inset-block-start: 0;
      inset-inline: 0;
      pointer-events: none;
      transition: padding 0.3s ease-in-out;
      
      .v-theme--light & {
        background: rgba(var(--v-theme-surface), 0.6);
      }
      
      .v-theme--dark & {
        background: rgba(var(--v-theme-background), 0.5);
      }

      .v-theme--purple & {
        background: rgba(var(--v-theme-background), 0.5);
      }

      .v-theme--transparent & {
        backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
        background: rgba(var(--v-theme-background), var(--transparent-opacity-heavy, 0.5));
      }
    }
  }
}