front_end/panels/common/aiCodeCompletionSummaryToolbar.css

/*
 * 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-code-completion-summary-toolbar {
    display: flex;
    height: 26px;
    background-color: var(--sys-color-cdt-base-container);
    padding: var(--sys-size-2) var(--sys-size-5);
    align-items: center;
    gap: var(--sys-size-5);
    flex-shrink: 0;
    color: var(--sys-color-on-surface-subtle);

    &:not(.has-top-border) {
      border-top: var(--sys-size-1) solid var(--sys-color-divider);
    }

    devtools-widget.disclaimer-widget {
      flex: none;
    }

    span.link {
      color: var(--sys-color-on-surface-subtle);
      /* Inside the code mirror editor, the cursor and text-decoration styling need to be provided explicitly */
      cursor: pointer;
      text-decoration: underline;

      &:focus-visible {
        outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
        outline-offset: 0;
        border-radius: var(--sys-shape-corner-extra-small);
      }
    }

    .ai-code-completion-recitation-notice {
      white-space: nowrap;

      span.link {
        padding-left: var(--sys-size-3);
      }
    }

    &.has-disclaimer .ai-code-completion-recitation-notice {
      padding-left: var(--sys-size-5);
      border-left: var(--sys-size-1) solid var(--sys-color-divider);
    }

    @media (width < 545px) {
      &.has-disclaimer.has-recitation-notice {
        height: 46px;
        flex-direction: column;
        align-items: flex-start;

        .ai-code-completion-disclaimer {
          height: 26px;
          margin-bottom: -3px;
          margin-top: var(--sys-size-2);
          flex-shrink: 1;
        }

        .ai-code-completion-recitation-notice {
          height: 26px;
          padding-left: 0;
          border-left: 0;
          margin-top: -3px;
        }
      }
    }

    devtools-tooltip:popover-open {
        display: flex;
        flex-direction: column;
        align-items: center;

        .citations-tooltip-container {
            display: inline-flex;
            padding: var(--sys-size-4) var(--sys-size-5);
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: var(--sys-size-2);
            white-space: normal;

            devtools-link {
                color: var(--sys-color-primary);
                text-decoration: underline;

              &:focus-visible {
                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
                outline-offset: 0;
                border-radius: var(--sys-shape-corner-extra-small);
              }
          }
      }
    }
  }
}