$padding: 16px;

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

  .tippy-content {
    padding: $padding;
  }

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

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