/* Start Classic-Page Styles */
[data-page-style="classic"] {
  body {
    @apply bg-white dark:bg-bodybg;
  }

  .box {
    @apply shadow-none shadow-transparent border border-defaultborder;
  }

  &.dark {
    body {
      @apply bg-bodybg;
    }
    .box {
      @apply shadow-none shadow-transparent border border-defaultborder/10;
    }
    &[data-width="boxed"] {
      .page {
        @apply bg-bodybg!;
      }
    }
  }
  &[data-width="boxed"] {
    .page {
      @apply bg-white! bg-bodybg!;
    }
  }
}

/* End Classic-Page Styles */

// page styles modern start
[data-page-style="modern"] {
  --color-light: rgb(255,255,255);
  --color-customwhite: rgb(243, 246, 248);
  --color-defaultborder: rgb(230,235,241);
  // --input-border: 0 0 0;
  .dropdown-menu {
    @apply bg-white;
  }
  body {
    @apply bg-white;
  }
  .box {
    @apply shadow-none bg-[#f3f6f8];
  }
  &[class="dark"] {
    --color-light: rgb(20,20,20);
    --color-customwhite: rgb(var(--color-bodybg));
    .box {
      @apply shadow-none bg-bodybg ;
    }
    .dropdown-menu {
      @apply bg-light;
    }
    body {
      @apply bg-bodybg;
    }
    .ti-btn-light {
      @apply bg-black/10! border-black/10!;
      &:hover,
      &:focus,
      &:active {
        @apply bg-black/10! border-black/10!;
      }
    }
  }
  .footer {
    @apply bg-[#f3f6f8];
  }
  .app-sidebar,
  .footer,
  .app-header,
  .app-sidebar .main-sidebar {
    @apply shadow-none;
  }
  @media (min-width: 992px) {
    // &[data-menu-styles][data-nav-layout="horizontal"] .app-sidebar {
    //   @apply border-b! border-[rgba(255,255,255,0.1)]! ;
    // }
    &.dark {

      &[data-menu-styles][data-nav-layout="horizontal"] .app-sidebar {
        @apply border-white/10!;
      }
    }
  }
}
// page styles modern end