/*
 * Copyright 2024 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 > *) {
  :scope {
    display: block;
    border-bottom: 1px solid var(--sys-color-divider);
    flex: none;
  }

  ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sys-size-4);
    padding: 0 var(--sys-size-4);
    justify-content: flex-start;
    align-items: center;
  }

  .insight-chip button {
    background: none;
    user-select: none;
    font: var(--sys-typescale-body4-regular);
    border: var(--sys-size-1) solid var(--sys-color-primary);
    border-radius: var(--sys-shape-corner-extra-small);
    display: flex;
    margin: var(--sys-size-4) 0;
    padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-4);
    width: max-content;
    white-space: pre;

    .keyword {
      color: var(--sys-color-primary);
      padding-right: var(--sys-size-3);
    }
  }

  .insight-chip button:hover {
    background-color: var(--sys-color-state-hover-on-subtle);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .insight-message-box {
    background: var(--sys-color-surface-yellow);
    border-radius: var(--sys-shape-corner-extra-small);
    font: var(--sys-typescale-body4-regular);
    margin: var(--sys-size-4) 0;

    button {
      color: var(--sys-color-on-surface-yellow);
      border: none;
      text-align: left;
      background: none;
      padding: var(--sys-size-4) var(--sys-size-5);
      width: 100%;
      max-width: 500px;

      .insight-label {
        color: var(--sys-color-orange-bright);
        padding-right: var(--sys-size-3);
        font-weight: var(--ref-typeface-weight-medium);
        margin-bottom: var(--sys-size-2);
      }

      &:hover {
        background-color: var(--sys-color-state-hover-on-subtle);
        cursor: pointer;
        transition: opacity 0.2s ease;
      }
    }
  }
}