tool-tip:not(:defined) {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem;
  font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;
  line-height: 1.6;
}

h1 {
  margin-bottom: 2rem;
}

h2 {
  border-bottom: 1px solid;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}

section {
  margin-bottom: 2rem;
}

.demo-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  display: flex;
}

button {
  cursor: pointer;
  background: #f8fafc;
  border: 1px solid;
  padding: .5rem 1rem;
  font-size: .875rem;
}

button:hover {
  background: #f1f5f9;
}

.placement-grid {
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  max-width: 400px;
  margin: 2rem auto;
  display: grid;
}

.placement-grid button {
  padding: .5rem;
  font-size: .75rem;
}

.placement-grid .center {
  cursor: default;
  background: #e2e8f0;
  border: none;
  grid-area: 3 / 3;
}

.placement-grid .top {
  grid-area: 1 / 3;
}

.placement-grid .top-start {
  grid-area: 1 / 2;
}

.placement-grid .top-end {
  grid-area: 1 / 4;
}

.placement-grid .bottom {
  grid-area: 5 / 3;
}

.placement-grid .bottom-start {
  grid-area: 5 / 2;
}

.placement-grid .bottom-end {
  grid-area: 5 / 4;
}

.placement-grid .left {
  grid-area: 3 / 1;
}

.placement-grid .left-start {
  grid-area: 2 / 1;
}

.placement-grid .left-end {
  grid-area: 4 / 1;
}

.placement-grid .right {
  grid-area: 3 / 5;
}

.placement-grid .right-start {
  grid-area: 2 / 5;
}

.placement-grid .right-end {
  grid-area: 4 / 5;
}

.inline-text {
  background: #f8fafc;
  padding: 1rem;
}

.inline-text a {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}

code {
  background: #f1f5f9;
  padding: .125rem .25rem;
  font-size: .875em;
}

.custom-tooltip {
  --tool-tip-background: #7c3aed;
  --tool-tip-color: #fff;
  --tool-tip-border-radius: 8px;
  --tool-tip-padding: .75rem 1rem;
}

.warning-tooltip {
  --tool-tip-background: #dc2626;
}

.info-tooltip {
  --tool-tip-background: #0284c7;
}
tool-tip:not(:defined) {
  display: none;
}

tool-tip {
  --tool-tip-max-width: 20rem;
  --tool-tip-show-delay: .15s;
  --tool-tip-hide-delay: 0s;
  --tool-tip-background: #1e293b;
  --tool-tip-color: #fff;
  --tool-tip-border-radius: 4px;
  --tool-tip-padding: .5rem .75rem;
  --tool-tip-font-size: .875rem;
  --tool-tip-line-height: 1.4;
  --tool-tip-arrow-size: 8px;
  --tool-tip-z-index: 1000;
}

tool-tip .popup {
  z-index: var(--tool-tip-z-index);
  max-width: var(--tool-tip-max-width);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tool-tip-hide-delay) ease,
            visibility var(--tool-tip-hide-delay) ease;
  position: fixed;
}

tool-tip .popup.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tool-tip-show-delay) ease,
                visibility var(--tool-tip-show-delay) ease;
}

tool-tip .body {
  padding: var(--tool-tip-padding);
  background: var(--tool-tip-background);
  color: var(--tool-tip-color);
  border-radius: var(--tool-tip-border-radius);
  font-size: var(--tool-tip-font-size);
  line-height: var(--tool-tip-line-height);
  overflow-wrap: break-word;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

tool-tip .arrow {
  border: var(--tool-tip-arrow-size) solid transparent;
  width: 0;
  height: 0;
  position: absolute;
}

tool-tip .popup[data-placement^="top"] .arrow {
  border-top-color: var(--tool-tip-background);
  border-bottom: 0;
}

tool-tip .popup[data-placement^="bottom"] .arrow {
  border-bottom-color: var(--tool-tip-background);
  border-top: 0;
}

tool-tip .popup[data-placement^="left"] .arrow {
  border-left-color: var(--tool-tip-background);
  border-right: 0;
}

tool-tip .popup[data-placement^="right"] .arrow {
  border-right-color: var(--tool-tip-background);
  border-left: 0;
}

tool-tip[disabled] .popup {
  display: none;
}