ncd-fe/packages/pl-fe/src/styles/new/layout.scss

html {
  height: 100%;
}

body {
  @apply bg-white text-base antialiased black:bg-black dark:bg-gray-800;
  height: 100%;

  &.system-font,
  &.system-font .font-sans {
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  }

  &.system-font .font-mono {
    font-family: ui-monospace, monospace;
  }

  &.with-modals {
    @apply overflow-hidden;
  }
}

#pl-fe {
  height: 100%;
}

.⁂-dropdown-navigation {
  @apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right;
  
  &__overlay {
    @apply fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700;
  }

  &__container {
    @apply z-[1000];

    &:not(&--partially-visible) {
      @apply hidden;
    }

    &--visible {
      .⁂-dropdown-navigation__overlay {
        @apply opacity-20;
      }
    }

    &:not(&--visible) {
      .⁂-dropdown-navigation__overlay {
        @apply no-reduce-motion:opacity-0;
      }
    }
  }

  &__link {
    @apply rounded-lg text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800 flex gap-2 items-center;

    &__icon {
      @apply relative inline-flex rounded-lg bg-primary-100 p-2 dark:bg-gray-800;

      > div {
        @apply size-5 text-primary-500;
      }
    }
  }

  &__account-switcher {
    @apply flex flex-col gap-4;

    button {
      @apply flex items-center justify-between py-1;

      .⁂-icon {
        @apply size-4 text-gray-900 transition-transform dark:text-gray-100;
      }
    }

    &__accounts {
      @apply border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800;

      > a {
        @apply block py-2;

        > div {
          @apply pointer-events-none;
        }
      }
    }

    &__add {
      @apply flex items-center space-x-1 py-2;

      .⁂-icon {
        @apply size-4 text-primary-500;
      }
    }

    &--expanded button .⁂-icon {
      @apply rotate-180;
    }
  }

  > div {
    @apply flex flex-col gap-y-4 relative size-full overflow-auto p-4;
  }
}

.⁂-thumb-navigation {
  @apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;

  &__item {
    @apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;

    .⁂-icon {
      @apply size-5 text-gray-600 black:text-white;

    }

    &--active .⁂-icon {
      @apply text-primary-500;
    }

    &--compose {
      @apply px-1.5 py-3.5;

      .⁂-icon {
        @apply size-6;
      }
    }
  }
}

.⁂-sidebar-navigation {
  @apply flex flex-col gap-4;

  .⁂-site-logo {
    @apply h-12 w-auto cursor-pointer;
  }

  &--narrow {
    @apply items-center;

    .⁂-site-logo {
      @apply max-w-10 h-auto;
    }
  }
}

.⁂-modal-root {
  opacity: 0;

  &:not(.⁂-modal-root--visible) {
    z-index: 50;
    @apply transition-all;
  }

  &--visible {
    @apply fixed left-0 top-0 z-[100] size-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out;
  }

  &--revealed {
    opacity: 1;
  }

  &__overlay {
    @apply fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90;
  }

  &__modal {
    @apply my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)];
  }

  &[data-modal-type='DROPDOWN_MENU'] &__overlay {
    @apply opacity-60;
  }

  &[data-modal-type='MEDIA'], &[data-modal-type='DROPDOWN_MENU'] {
    .⁂-modal-root__modal {
      margin-top: 0!important;
      margin-bottom: 0!important;
    }
  }

  &:not([data-modal-type='MEDIA']) &__modal {
    padding: 1rem;
    @apply md:p-0;
  }
}

.⁂-dragging-area {
  @apply transition;
  pointer-events: none;
  position: fixed;
  z-index: 90;
  height: 100vh;
  width: 100vw;

  &--dragging {
    @apply backdrop-blur;
  }
}

.⁂-layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}