/*
 * Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope (devtools-widget) {
  .walkthrough-view {
    height: 100%;
    background-color: var(--sys-color-cdt-base-container);
    overflow: auto;
  }
}

@scope (devtools-widget > *) {
  .walkthrough-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    height: 35px;
    border-bottom: 1px solid var(--sys-color-divider);
    flex-shrink: 0;
  }

  .walkthrough-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--sys-color-on-surface);
  }

  .steps-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--sys-size-6);
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-6);
  }

  .step-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-5);
  }

  .step-container {
    display: flex;
    gap: var(--sys-size-5);
    align-items: flex-start;
  }

  .step-icon {
    color: var(--sys-color-on-surface-subtle);
    width: var(--sys-size-8);
    height: var(--sys-size-8);
    flex-shrink: 0;
    margin-top: var(--sys-size-2);
  }

  .step-content {
    flex: 1;
    font-size: 11px;
    color: var(--sys-color-on-surface);
    line-height: 1.4;
  }

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--sys-color-on-surface-subtle);
    font-size: 11px;
  }

  .walkthrough-inline {
    border-radius: var(--sys-size-5);
    overflow: hidden;
    background-color: var(--sys-color-surface1);
    width: fit-content;

    &[open] {
      width: auto;
    }
  }

  .walkthrough-inline > summary {
    display: flex;
    align-items: center;
    padding: var(--sys-size-4) var(--sys-size-6);
    cursor: pointer;
    background-color: transparent;
    font: var(--sys-typescale-body4-regular);
    user-select: none;
    list-style: none; /* Hide default triangle */
    justify-content: flex-start;
    gap: var(--sys-size-4);
  }

  .walkthrough-inline > summary::-webkit-details-marker {
    display: none;
  }

  .walkthrough-inline > summary:hover {
    background-color: var(--sys-color-state-hover-on-subtle);
  }

  .walkthrough-inline .steps-container {
    padding: var(--sys-size-6);
    max-height: 300px; /* Limit height for inline view */
    overflow-y: auto;
    border-top: 1px solid var(--sys-color-divider);
    background-color: transparent;
  }

  .walkthrough-inline > summary > devtools-icon {
    width: var(--sys-size-8);
    height: var(--sys-size-8);
    transition: transform 0.2s;
  }

  .walkthrough-inline[open] > summary > devtools-icon {
    transform: rotate(180deg);
  }
}