@use "../variables";
[data-vertical-style="detached"] {
  @media (min-width: 1600px) {
    &[data-width="default"] {
      .page {
        width: 95%;
        margin: 0 auto;
        padding-inline-start: 10.25rem;
      }
      .main-content {
        padding: 0 10rem 0 0.75rem;
      }
      &[dir="rtl"] {
        .main-content {
          padding: 0 0.75rem 0 10rem;
        }
      }
    }
  }
  @media (min-width: 992px) {
    .page {
      width: 95%;
      margin: 0 auto;
      padding-inline-start: 1.25rem;
    }
    .app-sidebar {
      inset-block-start: calc(64px + 0.5rem);
      inset-block-end: 1.5rem;
      inset-inline-start: inherit;
      border-radius: variables.$default-radius;
      border: 1px solid variables.$menu-border-color;
      height: 90% !important;
      &:before {
        border-radius: 0.25rem;
      }

      .main-sidebar-header {
        display: none;
      }
    }
    .app-header {
      .sidemenu-toggle.header-link.animated-arrow.hor-toggle.horizontal-navtoggle {
        margin-inline-start: 1.25rem;
      }
    }

    .main-sidebar {
      height: 100%;
      margin-block-start: 0;
      box-shadow: none !important;
    }

    .app-content {
      margin-inline-start: 16rem;
      position: relative;
    }

    &[data-page-style="classic"] {
      .app-sidebar {
        border: 1px solid variables.$menu-border-color;
      }
    }

    &[data-theme-mode="light"] {
      &[data-header-styles="dark"] {
        .horizontal-logo {
          .header-logo {
            .desktop-logo,
            .toggle-logo,
            .toggle-dark {
              display: none;
            }

            .desktop-dark {
              display: block;
            }
          }
        }
      }

      &[data-header-styles="color"],
      &[data-header-styles="gradient"] {
        .horizontal-logo {
          .header-logo {
            .desktop-logo,
            .toggle-logo,
            .toggle-dark {
              display: none;
            }

            .desktop-dark {
              display: block;
            }
          }
        }
      }
    }

    &[data-theme-mode="dark"] {
      .horizontal-logo {
        .header-logo {
          .desktop-logo,
          .toggle-logo,
          .toggle-dark {
            display: none;
          }

          .desktop-dark {
            display: block;
          }
        }
      }

      &[data-header-styles="light"] {
        .horizontal-logo {
          .header-logo {
            .desktop-dark,
            .toggle-logo,
            .toggle-dark {
              display: none;
            }

            .desktop-logo {
              display: block;
            }
          }
        }
      }
    }

    &[data-toggled="detached-close"] {
      &:not([data-icon-overlay="open"]) {
        .app-sidebar {
          width: 5rem;

          .side-menu__label,
          .side-menu__angle,
          .category-name,
          .slide-menu,
          .side-menu__item .badge {
            display: none !important;
          }
          .main-menu{
            padding-inline: 0.5rem !important;
          }
          .slide {
            padding: 0 0rem !important;
          }
          .side-menu__item {
            justify-content: center;

            .side-menu__icon {
              margin-inline-end: 0;
            }
          }

          .slide__category {
            padding: 1.2rem 1.65rem;
            position: relative;
            &:before {
                content: "\f3c2";
                font-family: remixicon !important;
                position: absolute;
                font-size: 8px;
                inset-inline-start: 1.75rem;
                inset-inline-end: 0;
                inset-block-start: 1rem;
                inset-block-end: 0;
                opacity: 1;
                color: variables.$menu-prime-color;
            }
          }
        }
      }

      .app-content {
        margin-inline-start: 5rem;
        position: relative;
      }

      &[data-icon-overlay="open"] {
        .app-sidebar {
          width: 16rem;

          .main-sidebar-header {
            width: 16rem;

            .header-logo {
              .desktop-logo {
                display: block !important;
              }

              .desktop-dark,
              .toggle-logo,
              .toggle-dark {
                display: none !important;
              }
            }
          }

          .side-menu__item {
            justify-content: flex-start;
          }

          .side-menu__icon {
            margin-inline-end: 0.625rem;
          }

          .slide__category {
            padding: 0.75rem 1.65rem;

            &:before {
              display: none;
            }
          }
        }
      }
    }

    .app-header {
      padding-inline-start: 0;

      .main-header-container {
        width: 94%;
      }

      .horizontal-logo {
        padding: 1rem 0;
        display: block;

        img {
          height: 1.5rem;
          line-height: 1.5rem;
        }

        .desktop-logo {
          display: block;
        }

        .desktop-dark,
        .toggle-logo,
        .toggle-dark {
          display: none;
        }
      }
    }

    .footer {
      box-shadow: none;
      background-color: transparent !important;
      border-top: 0;
    }

    &[data-menu-styles="dark"] {
      &[data-bg-img="bgimg3"],
      &[data-bg-img="bgimg1"],
      &[data-bg-img="bgimg2"],
      &[data-bg-img="bgimg4"],
      &[data-bg-img="bgimg5"] {
        .app-sidebar:before {
          border-radius: 0.25rem;
        }
      }
    }
  }
}

@media (min-width: 992px) {
  [data-vertical-style=detached][data-theme-mode="dark"], [data-vertical-style=detached][data-theme-mode="light"]{
    &[data-bg-img="bgimg3"],
    &[data-bg-img="bgimg1"],
    &[data-bg-img="bgimg2"],
    &[data-bg-img="bgimg4"],
    &[data-bg-img="bgimg5"] {
      .app-sidebar {
        border: 0px solid variables.$menu-border-color;
      }
    }
  }
}