front_end/panels/common/badgeNotification.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 > *) {
  :scope {
    position: fixed;
    z-index: 9999;
    /* subtract var(--sys-size-5) * 2 so that there is equal space on the left and on the right in small screens */
    max-width: calc(100% - 2 * var(--sys-size-5));
  }

  .container {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 485px;
    background: var(--sys-color-inverse-surface);
    box-shadow: var(--sys-elevation-level3);
    border-radius: var(--sys-shape-corner-small);
    font: var(--sys-typescale-body4-regular);
    animation: slideIn 100ms cubic-bezier(0, 0, 0.3, 1);
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--sys-size-5) var(--sys-size-6) var(--sys-size-6) var(--sys-size-6);
  }

  .action-and-text-container {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-3);
  }

  .long-action-container {
    margin-left: auto;
    /*
    * Buttons have a 24px total height, which includes padding for the hover area.
    * We apply a -3px vertical margin to compensate for this extra space.
    * This ensures the component aligns based on the visual text height,
    * not the full clickable bounding box.
    */
    margin-block: -3px;
  }

  .label-container {
    display: flex;
    width: 100%;
    align-items: center;
    padding-block: var(--sys-size-3);
    line-height: 18px;
  }

  .badge-container {
    margin-right: 10px;
    min-width: 64px;
    height: 64px;
  }

  .badge-image {
    width: 100%;
    height: 100%;
    border-radius: var(--sys-shape-corner-full);
  }

  .badge-link {
    color: var(--sys-color-inverse-primary);
  }

  .message {
    width: 100%;
    color: var(--sys-color-inverse-on-surface);
    flex: 1 0 0;
    text-wrap: pretty;
    user-select: text;
  }

  devtools-button.dismiss {
    padding: 3px;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(var(--sys-size-5));
    opacity: 0%;
  }

  to {
    opacity: 100%;
  }
}