/**
 * Main
 */

@layer dx-components {
  /**
   * Main Web app.
   */
  .dx-main-bounce-layout {
    @apply fixed overflow-auto overscroll-auto;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    z-index: 0;
  }

  /** TODO(burdon): Reconcile with dx-main-bounce-layout */
  .dx-main-content-padding-transitions {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    transition-property: padding-inline-start, padding-inline-end, scroll-padding-start, scroll-padding-end;
  }

  /**
   *
   */
  .dx-main-intrinsic-size {
    inline-size: calc(100dvw - 2 * var(--main-spacing));
    transition-property: inline-size;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

    @media (width >= theme(--breakpoint-lg)) {
      &[data-sidebar-left-state='closed'][data-sidebar-right-state='closed'] {
        inline-size: calc(100dvw - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='closed'] {
        inline-size: calc(100dvw - var(--dx-l0-size) - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='closed'] {
        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - 2 * var(--main-spacing));
      }

      &[data-sidebar-left-state='closed'][data-sidebar-right-state='collapsed'] {
        inline-size: calc(100dvw - var(--dx-r0-size) - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='collapsed'] {
        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='collapsed'] {
        inline-size: calc(100dvw - var(--dx-nav-sidebar-size) - var(--dx-r0-size) - 2 * var(--main-spacing));
      }

      &[data-sidebar-left-state='closed'][data-sidebar-right-state='expanded'] {
        inline-size: calc(100dvw - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='collapsed'][data-sidebar-right-state='expanded'] {
        inline-size: calc(100dvw - var(--dx-l0-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing));
      }
      &[data-sidebar-left-state='expanded'][data-sidebar-right-state='expanded'] {
        inline-size: calc(
          100dvw - var(--dx-nav-sidebar-size) - var(--dx-complementary-sidebar-size) - 2 * var(--main-spacing)
        );
      }
    }
  }
}

@layer dx-components {
  .dx-main-sidebar {
    @apply fixed overscroll-contain overflow-x-hidden overflow-y-auto;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    @apply border-primary-separator rounded-md;
    @apply backdrop-blur-md;
    .dark & {
      @apply backdrop-blur-lg;
    }
    background-color: var(--color-sidebar-surface);
    color: var(--color-sidebar-fg);
    --surface-bg: var(--color-sidebar-surface);

    /* Current / selected items read one stop brighter than default body text. */
    & :is([aria-current]:not([aria-current='false']), [aria-selected='true']) {
      color: var(--color-sidebar-current-fg);
    }

    transition-property: inset-inline-start, inset-inline-end, inline-size;
    inset-block-start: max(0.5rem, env(safe-area-inset-top));
    inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
    inline-size: calc(100dvw - 3rem);
    z-index: 7;

    @media (width >= theme(--breakpoint-lg)) {
      @apply top-0 bottom-0 rounded-none border-y-0;
    }

    &[data-resizing='false'] {
      @apply duration-200;
    }

    &[data-side='is'] {
      @apply -start-[100vw] border-e;
      border-inline-end-width: var(--border-width-landmark-line) !important;
      border-inline-end-style: solid;
      z-index: 8;

      &[data-state='expanded'] {
        inset-inline-start: max(0.5rem, env(safe-area-inset-left));
        @media (width >= theme(--breakpoint-lg)) {
          @apply start-0;
        }
      }

      @media (width >= theme(--breakpoint-sm)) {
        @apply w-(--dx-nav-sidebar-size);
      }

      @media (width >= theme(--breakpoint-lg)) {
        border-inline-start-width: 0;
        border-inline-end-width: 0;

        &[data-state='collapsed'] {
          @apply w-(--dx-l0-size) start-0;
        }
        &[data-state='expanded'] {
          @apply w-(--dx-nav-sidebar-size);
        }
      }
    }

    &[data-side='ie'] {
      @apply -end-[100vw] border-s;
      border-inline-start-width: var(--border-width-landmark-line);
      border-inline-start-style: solid;

      &[data-state='expanded'] {
        inset-inline-end: max(0.5rem, env(safe-area-inset-right));
        @media (width >= theme(--breakpoint-lg)) {
          @apply end-0;
        }
      }

      @media (width >= theme(--breakpoint-sm)) {
        @apply w-(--dx-complementary-sidebar-size);
      }

      @media (width >= theme(--breakpoint-lg)) {
        border-inline-end-width: 0;

        &[data-state='collapsed'] {
          @apply w-(--dx-r0-size) end-0;
        }
        &[data-state='expanded'] {
          @apply w-(--dx-complementary-sidebar-size);
        }
      }
    }
  }

  .dx-main-overlay {
    @apply fixed inset-0 bg-scrim-surface;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    @apply opacity-0 hidden;
    z-index: 6;

    &[data-state='open'] {
      @apply opacity-100 block;

      @media (width >= theme(--breakpoint-lg)) {
        @apply opacity-100 hidden;
      }
    }
  }

  /**
   * Main content padding.
   */
  .dx-main-content-padding {
    padding-inline-start: 0;
    scroll-padding-inline-start: 0;
    padding-inline-end: 0;
    scroll-padding-inline-end: 0;

    @media (width >= theme(--breakpoint-lg)) {
      &[data-sidebar-left-state='collapsed'] {
        padding-inline-start: var(--dx-l0-size);
        scroll-padding-inline-start: var(--dx-l0-size);
      }
      &[data-sidebar-left-state='expanded'] {
        padding-inline-start: var(--dx-nav-sidebar-size);
        scroll-padding-inline-start: var(--dx-nav-sidebar-size);
      }

      &[data-sidebar-right-state='collapsed'] {
        padding-inline-end: var(--dx-r0-size);
        scroll-padding-inline-end: var(--dx-r0-size);
      }
      &[data-sidebar-right-state='expanded'] {
        padding-inline-end: var(--dx-complementary-sidebar-size);
        scroll-padding-inline-end: var(--dx-complementary-sidebar-size);
      }
    }
  }
}