.communication-tips-toggle {
  --communication-tips-background: #fff;
  background: var(--communication-tips-background);
  border-color: #e5e7eb;
  color: #820933;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  white-space: nowrap;
}

.communication-tips-toggle:hover {
  background: var(--communication-tips-background);
}

.communication-tips-toggle[aria-pressed='true'] {
  --communication-tips-background: #ffd8e1;
  border-color: #820933;
  box-shadow: inset 0 1px 3px rgb(130 9 51 / 18%);
}

.communication-tips-toggle:focus-visible {
  outline: 2px solid #3f84ae;
  outline-offset: 3px;
}

.communication-tips-indicator {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.communication-tips-indicator path { visibility: hidden; }
.communication-tips-toggle[aria-pressed='true'] .communication-tips-indicator path { visibility: visible; }

@media (forced-colors: active) {
  .communication-tips-toggle[aria-pressed='true'] {
    --communication-tips-background: Canvas;
    border-color: Highlight;
    color: CanvasText;
  }
}