$padding: 16px;

.tippy-box[data-theme~="surface-variant"] {
  filter: drop-shadow(0 0 12px #000a);
  border-radius: calc(24px + $padding);
  background-color: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);

  .tippy-content {
    padding: $padding;
  }

  h2 {
    display: flex;
    justify-content: center;
    margin-block-start: 8px;
    margin-block-end: calc(8px + $padding);
  }

  @each $placement in top, bottom, right, left {
    &[data-placement^="#{$placement}"] > .tippy-arrow::before {
      border-#{$placement}-color: var(--md-sys-color-surface-variant);
    }
  }

  @media (forced-colors: active) {
    filter: none;
    border: 1px solid CanvasText;
    background-color: Canvas;
    color: CanvasText;

    > .tippy-arrow {
      display: none;
    }
  }
}

.tippy-box[data-theme~="tooltip"] {
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

.tippy-box[data-theme~="search-completion"] {
  filter: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;

  .tippy-content {
    padding: 0;
  }
}