@use '../../shared/styles/variables' as *;

.app-layout {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(
      52% 42% at 16% 18%,
      rgba(45, 140, 255, 0.055) 0%,
      transparent 72%
    ),
    radial-gradient(
      50% 42% at 88% 16%,
      rgba(3, 29, 154, 0.055) 0%,
      transparent 74%
    ),
    radial-gradient(
      54% 44% at 14% 80%,
      rgba(51, 179, 67, 0.06) 0%,
      transparent 72%
    ),
    radial-gradient(
      56% 46% at 86% 78%,
      rgba(66, 93, 232, 0.075) 0%,
      transparent 74%
    ),
    radial-gradient(
      74% 44% at 50% 106%,
      rgba(3, 29, 154, 0.075) 0%,
      rgba(66, 93, 232, 0.04) 42%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      #eff2f7 0%,
      #f8fafc 40%,
      #f4f7fb 70%,
      #eff2f7 100%
    );

  [data-theme='dark'] & {
    --color-bg: #242a33;

    background:
      radial-gradient(
        54% 46% at 16% 18%,
        rgba(45, 140, 255, 0.085) 0%,
        transparent 72%
      ),
      radial-gradient(
        52% 44% at 86% 16%,
        rgba(99, 102, 241, 0.085) 0%,
        transparent 72%
      ),
      radial-gradient(
        54% 44% at 14% 78%,
        rgba(24, 184, 155, 0.07) 0%,
        transparent 72%
      ),
      radial-gradient(
        58% 48% at 86% 78%,
        rgba(45, 140, 255, 0.095) 0%,
        transparent 74%
      ),
      radial-gradient(
        76% 46% at 50% 106%,
        rgba(45, 140, 255, 0.16) 0%,
        rgba(72, 96, 180, 0.085) 42%,
        transparent 78%
      ),
      linear-gradient(
        180deg,
        #242a33 0%,
        #242a33 12%,
        #222832 18%,
        #1f252e 30%,
        #1d232c 55%,
        #171b22 100%
      );
  }
}

.app-layout__sidebar {
  flex: 0 0 auto;
}

.app-layout__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  max-height: 100vh;
  //padding: 0px 20px 20px 20px;
}

.app-layout__scroll {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  .simplebar-content {
    min-height: 100%;
    box-sizing: border-box;
    padding:
      $layout-page-padding-top
      $layout-page-padding-right
      $layout-page-padding-bottom
      $layout-page-padding-left;

    display: flex;
    flex-direction: column;
  }

  .simplebar-track.simplebar-vertical {
    top: 74px;
    right: -8px;
    bottom: 8px;
    width: 16px;
  }

  .simplebar-scrollbar::before {
    background: $gray50;
    border-radius: 8px;
    opacity: 0.65;
  }
}

.app-layout__route-content {
  display: flex;
  flex: 1 0 auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.app-layout__unsupported {
  display: none !important;
}

.app-layout__drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: $color-backdrop-soft;
  backdrop-filter: blur(4px);

  &[data-state='open'] {
    animation: appLayoutDrawerOverlayShow 0.18s ease both;
  }

  &[data-state='closed'] {
    animation: appLayoutDrawerOverlayHide 0.18s ease both;
  }
}

.app-layout__drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 801;
  margin: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: 20px;
  //background: $color-bg;
  box-shadow: $shadow-modal-dark;
  overflow: hidden;

  &[data-state='open'] {
    animation: appLayoutDrawerShow 0.24s cubic-bezier(0.34, 1.02, 0.64, 1) both;
  }

  &[data-state='closed'] {
    animation: appLayoutDrawerHide 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

.app-layout__drawer-scroll {
  width: 100%;
  height: 100%;
  max-height: 100%;

  .simplebar-track.simplebar-vertical {
    width: 10px;
    right: 2px;
  }

  .simplebar-scrollbar::before {
    background: $gray50;
    opacity: 0.55;
  }
}

.app-layout__drawer-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@include wide-down {
  .app-layout__sidebar {
    display: none;
  }

  .app-layout__content {
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
  }
}

@media (max-width: 1279.98px) {
  .app-layout {
    min-height: 100vh;
  }

  .app-layout__sidebar,
  .app-layout__content,
  .app-layout__drawer-overlay,
  .app-layout__drawer {
    display: none;
  }

  .app-layout__unsupported {
    display: flex !important;
    min-height: 100vh !important;
    padding: 32px !important;
    background: $color-bg;
  }
}

@keyframes appLayoutDrawerOverlayShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes appLayoutDrawerOverlayHide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes appLayoutDrawerShow {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appLayoutDrawerHide {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}
