@use 'mixins';

html {
  height: 100%;

  --font-sans:
    pl-fe i18n, 'Inter', ui-sans-serif, system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI',
    'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
}

html:has(body.with-modals),
body.with-modals {
  touch-action: none;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

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 {
    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 backdrop-saturate-200 ease-in-out black:bg-black/80 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 no-reduce-motion:scale-0;

  &__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 {
        @apply scale-100;

        &__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 svg {
        @apply text-primary-500 size-5;
      }
    }
  }

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

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

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

        > svg {
          height: 1rem;
          width: 1rem;
        }
      }
    }

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

    &__account {
      @apply block py-2;

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

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

      .⁂-icon svg {
        @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 backdrop-saturate-200 black:bg-black/75 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,
    .svg-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 {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  &__header {
    @apply flex flex-col gap-y-4;

    &__account {
      @apply relative flex items-center;

      &__expand {
        @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500;
      }
    }
  }

  .⁂-site-logo {
    height: 3rem;
    width: auto;
    cursor: pointer;
  }

  &--narrow {
    align-items: center;

    .⁂-site-logo {
      max-width: 2.5rem;
      height: auto;
    }

    .⁂-sidebar-navigation-link > p {
      display: none;
    }
  }

  &__links {
    @apply flex flex-col gap-y-1.5;
  }

  &__compose-button {
    @include mixins.button($theme: accent, $size: lg, $block: true);

    svg {
      @apply size-4;
    }
  }
}

.⁂-sidebar-navigation-link {
  @apply flex items-center w-full py-1 text-sm font-semibold space-x-4 rtl:space-x-reverse transition-colors duration-200;

  @media (height >= 960px) {
    padding: 0.5rem 0;
  }

  &__icon {
    @apply relative rounded-lg inline-flex p-2.5 transition-colors duration-200;

    svg {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  &--active {
    @apply text-gray-900 dark:text-white;

    .⁂-sidebar-navigation-link__icon {
      @apply bg-primary-600;

      svg {
        @apply text-white;
      }
    }
  }

  &:not(&--active) {
    @apply text-gray-700 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;

    .⁂-sidebar-navigation-link__icon {
      @apply bg-primary-50 dark:bg-gray-900;

      svg {
        @apply text-primary-700 dark:text-white;
      }
    }
  }

  &:hover:not(&--active) &__icon {
    @apply bg-primary-100 dark:bg-gray-700 black:bg-gray-800;
  }

  > p {
    @include mixins.text($weight: semibold, $theme: inherit);
  }
}

.⁂-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;
    width: 100%;
    height: 100dvh;
  }

  &--revealed {
    opacity: 1;
  }

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

  &__container {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    pointer-events: none;
    user-select: none;
    overscroll-behavior: none;
    min-height: 100dvh;
    z-index: 9999;
  }

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

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

  &:not([data-modal-type='MEDIA']) &__container {
    display: flex;
    padding: 0 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;
  flex-grow: 1;
  z-index: 1;

  &__content {
    // FIXME: min-h-[100dvh] is a workaround for some Ladybird bug
    @apply mx-auto w-full max-w-3xl grow black:pt-0 sm:px-6 sm:pt-4 md:gap-4 md:px-8 min-h-[100dvh];

    &--full-width {
      @apply flex md:max-w-full;
    }

    &:not(&--full-width) {
      @apply md:grid md:max-w-7xl md:grid-cols-12 xl:max-w-[1440px];
    }
  }

  &__container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  &__sidebar {
    @apply hidden lg:block;

    &--shrink {
      @apply w-10;
    }

    &:not(&--shrink) {
      @apply lg:col-span-3;
    }

    &__content {
      @apply pb-4;
    }
  }

  &__main {
    @apply md:col-span-12 lg:col-span-9 xl:col-span-6 pb-14 lg:pb-0 xl:pb-16 black:border-gray-800 lg:black:border-l xl:black:border-r;

    &--chats {
      @apply xl:pb-16;
    }
  }

  &__aside {
    @apply hidden xl:col-span-3 xl:block;

    &__content {
      @apply space-y-4 pb-12;
    }
  }
}

.⁂-background-shapes {
  @apply fixed pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden black:hidden;

  &--preview {
    position: absolute;
  }

  > div {
    height: 100vh;
    width: 100vw;
    @apply bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark;
  }
}

.⁂-widget {
  @apply border-b border-solid border-gray-200 black:border-gray-800 dark:border-primary-800;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    h1 {
      @include mixins.text($size: xl, $weight: bold);
    }
  }

  &__icon {
    margin-left: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    @apply text-black dark:text-white rtl:rotate-180;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

div:has(.⁂-background-shapes),
.dark {
  .⁂-widget {
    @include mixins.card($variant: rounded);
    @apply border-none black:p-0 black:pb-6 black:border-solid;
  }
}

.⁂-footer-text {
  @include mixins.text($size: sm, $theme: muted);

  a {
    @include mixins.text($size: inherit, $theme: subtle);
    text-decoration-line: underline;
  }
}

.⁂-separator::before {
  @include mixins.text($size: sm, $theme: muted);
  content: '·';
  user-select: none;
}

.⁂-site-error {
  @apply flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900 md:col-span-12 lg:col-span-9 xl:col-span-6;

  main {
    @apply mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8;
  }

  &__body {
    @apply py-8;
  }

  &__message {
    @apply mx-auto max-w-xl space-y-2 text-center;

    h1 {
      @apply text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-500 sm:text-4xl;
    }

    &__body {
      @apply text-lg text-gray-700 dark:text-gray-600;

      a {
        @apply text-primary-600 hover:underline dark:text-primary-400;
      }
    }
  }

  &__form {
    @apply mx-auto max-w-lg space-y-4 py-16;

    &:last-child {
      @apply pb-0;
    }
  }

  &__message__version,
  &__browser {
    @include mixins.text($theme: muted);

    span {
      @apply font-semibold;
    }
  }

  footer {
    @apply mx-auto w-full max-w-7xl shrink-0 px-4 sm:px-6 lg:px-8;
  }

  nav {
    @apply flex justify-center gap-4;

    span {
      @apply inline-block border-l border-gray-300;
    }

    a {
      @apply text-sm font-medium text-gray-700 hover:underline dark:text-gray-600;
    }
  }

  &__logo {
    @apply flex shrink-0 justify-center;

    img {
      @apply h-12 w-auto;
    }
  }
}

.⁂-network-error {
  @apply flex gap-4 items-center justify-center min-h-[160px] rounded-lg p-10;

  p {
    @include mixins.text($align: center, $theme: muted);
  }
}

.⁂-layout__content .⁂-site-error {
  height: fit-content;
}
