/*
 * SPDX-FileCopyrightText: Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 */

.root {
  display: flex;
  flex: 1;
  align-items: stretch;

  /* Create a new z-index stacking context for the sidebar to be over the content */
  position: relative;
  z-index: 0;
}

.sidebar {
  flex: 0 0 224px;

  /* Put the sidebar over the content */
  position: relative;
  z-index: 10;

  & .sidebar-inner {
    block-size: 100%;
    border-inline-end: 1px solid var(--cpd-color-bg-subtle-primary);
    background-color: var(--cpd-color-bg-canvas-default);

    & .sidebar-sticky {
      position: sticky;
      top: calc(var(--cpd-space-16x) + 1px);
      padding-block: var(--cpd-space-6x);
      overflow: hidden;

      & .sidebar-content {
        width: 224px;
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.content {
  /* Take the remaining width */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--cpd-space-12x);

  & .main {
    /* Take the remaining height */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--cpd-space-6x);
  }
}

.details {
  flex: 0 0 360px;
  min-width: 0;

  /* In the DOM, the details view is first, but it's on the right side, hence
     the explicit ordering */
  order: 1;
  border-inline-start: solid 1px var(--cpd-color-bg-subtle-secondary);

  & .details-inner {
    position: sticky;

    /* This is the side of the header plus its border */
    top: calc(var(--cpd-space-16x) + 1px);
    padding: var(--cpd-space-4x);
    overflow-y: auto;
    max-block-size: calc(100vh - var(--cpd-space-16x) - 1px);
  }
}

.divider {
  block-size: 1px;
  background-color: var(--cpd-color-bg-subtle-secondary);
  margin: var(--cpd-space-6x) var(--cpd-space-4x);
}

.nav-link {
  display: flex;
  align-items: center;
  padding: var(--cpd-space-2x) var(--cpd-space-6x);
  gap: var(--cpd-space-3x);
  color: var(--cpd-color-text-secondary);

  & .nav-link-label {
    font: var(--cpd-font-body-md-medium);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
  }

  & .nav-link-icon {
    block-size: var(--cpd-space-6x);
    inline-size: var(--cpd-space-6x);
  }

  &:hover {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }

  &[data-status="active"] {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-primary);
  }
}

/* At this breakpoint, the sidebar only shows icons and expands over the content on hover */
@media screen and (width <= 1366px) {
  .sidebar {
    flex-basis: calc(2 * var(--cpd-space-6x) + var(--cpd-space-6x));
    min-width: 0;

    & .sidebar-inner {
      transition:
        width var(--default-transition-duration)
          var(--default-transition-timing-function),
        box-shadow var(--default-transition-duration)
          var(--default-transition-timing-function);
      width: calc(2 * var(--cpd-space-6x) + var(--cpd-space-6x));
    }

    & .nav-link-label {
      transition: opacity var(--default-transition-duration)
        var(--default-transition-timing-function);
      opacity: 0;
    }

    & .divider {
      transition: margin var(--default-transition-duration)
        var(--default-transition-timing-function);
      margin-inline: 0;
    }

    &:hover {
      & .sidebar-inner {
        box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
        width: 224px;
      }

      & .divider {
        margin-inline: var(--cpd-space-4x);
      }

      & .nav-link-label {
        opacity: 1;
      }
    }
  }
}

/* At this breakpoint, the sidebar becomes a scrollable list of chips */
@media screen and (width <= 768px) {
  .root {
    flex-direction: column;

    & .sidebar {
      flex: 0 0 auto;

      /* The whole sidebar becomes sticky, not just the content */
      position: sticky;

      /* This is the side of the header plus its border */
      top: calc(var(--cpd-space-16x) + 1px);

      & .sidebar-inner {
        width: 100%;
        border: none;
        box-shadow: none;

        & .sidebar-sticky {
          position: initial;
          padding: 0;

          & .sidebar-content {
            overflow: auto hidden;
            scrollbar-width: none;
            scroll-snap-type: x mandatory;

            /* FIXME: this should be 18px */
            padding: var(--cpd-space-4x);
            gap: var(--cpd-space-2x);
            width: auto;
            flex-direction: row;
          }
        }
      }
    }

    /* Only focus on the details screen if it's visible */
    &:has(> .details) {
      .content {
        /* We only hide the 'content', because we still want the footer */
        .main {
          display: none;
        }
      }
    }

    & .details {
      order: initial;

      & .details-inner {
        position: initial;
        top: initial;
        overflow-y: initial;
        max-block-size: initial;
      }
    }
  }

  .divider {
    display: none;
  }

  .nav-link {
    flex-shrink: 0;
    padding: var(--cpd-space-1-5x) var(--cpd-space-4x);
    border-radius: var(--cpd-radius-pill-effect);

    /* Make the scroll snap to items */
    scroll-snap-align: start;

    /* Matches the padding of the scroll container */
    scroll-margin-inline: var(--cpd-space-4x);

    & .nav-link-label {
      opacity: 1;
    }

    & .nav-link-icon {
      display: none;
    }
  }

  .content {
    padding: var(--cpd-space-2x) var(--cpd-space-4x);
  }
}
