/* 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. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

cr-tooltip {
  --paper-tooltip-delay-in: 300ms;
  --paper-tooltip-delay-out: 0ms;
  --paper-tooltip-opacity: 1.0;
  margin-top: -20px;
  pointer-events: all;
}

cr-tooltip::part(tooltip) {
  border-radius: 8px;
  /* Use drop-shadow filter so the caret also gets a shadow. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  padding: 16px;
  max-width: 300px;
  width: var(--onboarding-tooltip-width, auto);
  box-sizing: border-box;
  font-size: 12px;
  line-height: 16px;
  position: relative;
}

:host([is-coins-enabled]) cr-tooltip {
  max-width: none;
  padding-inline-start: 36px;
  margin-top: -5px;
}

/* Add a caret to the tooltip. */
cr-tooltip::part(tooltip)::after {
  content: '';
  position: absolute;
  top: 100%;
  inset-inline-start: 12.5px; /* Aligns the caret to the chip thumbnail*/
  border-width: 8px;
  border-style: solid;
  border-color: var(--paper-tooltip-background) transparent transparent
    transparent;
}

.tooltip-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tooltip-title {
  font-weight: 500;
}

a {
  color: var(--cr-link-color);
}

#buttons {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}