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

@scope to (devtools-widget > *) {
  .ai-assistance-explore-container {
    &,
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    font: var(--sys-typescale-headline4);
    gap: var(--sys-size-8);
    padding: var(--sys-size-3);
    overflow: auto;
    scrollbar-gutter: stable both-edges;

    .link {
      padding: 0;
      margin: 0 3px;
    }

    .header {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      justify-content: center;
      justify-self: center;
      gap: var(--sys-size-4);

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--sys-size-14);
        width: var(--sys-size-14);
        border-radius: var(--sys-shape-corner-small);
        background: linear-gradient(
          135deg,
          var(--sys-color-gradient-primary),
          var(--sys-color-gradient-tertiary)
        );
      }

      h1 {
        font: var(--sys-typescale-headline4);
      }

      p {
        text-align: center;
        font: var(--sys-typescale-body4-regular);
      }

      .link {
        font: var(--sys-typescale-body4-regular);
      }
    }

    .content {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--sys-size-5);
      align-items: center;
      justify-content: center;
      justify-self: center;
    }

    .feature-card {
      display: flex;
      padding: var(--sys-size-4) var(--sys-size-6);
      gap: 10px;
      background-color: var(--sys-color-surface2);
      border-radius: var(--sys-shape-corner-medium-small);
      width: 100%;
      align-items: center;

      .feature-card-icon {
        min-width: var(--sys-size-12);
        min-height: var(--sys-size-12);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--sys-color-tonal-container);
        border-radius: var(--sys-shape-corner-full);

        devtools-icon {
          width: 18px;
          height: 18px;
        }
      }

      .feature-card-content {
        h3 {
          font: var(--sys-typescale-body3-medium);
        }

        p {
          font: var(--sys-typescale-body4-regular);
          line-height: 18px;
        }
      }
    }
  }

  .ai-assistance-explore-footer {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: var(--sys-size-3);
    font: var(--sys-typescale-body5-regular);
    border-top: 1px solid var(--sys-color-divider);
    text-wrap: balance;
    text-align: center;

    p {
      margin: 0;
      padding: 0;
    }
  }
}