@layer components {
    .dashboard-tooltip-trigger {
            text-decoration: underline;
            text-decoration-style: dashed;
            text-underline-offset: 0.15em;
        }

    .tippy-box[data-theme~="dashboard"] {
            background: var(--dashboard-color-surface) !important;
            border: 1px solid var(--dashboard-color-border-strong);
            box-shadow: 0 0.25rem 0.75rem rgb(15 23 42 / 0.05);
            color: var(--dashboard-color-text) !important;
        }

    .tippy-box[data-theme~="dashboard"] > .tippy-content {
            padding: 1.25rem 1.5rem;
        }

    .tippy-box[data-theme~="dashboard"] > .tippy-arrow {
            color: var(--dashboard-color-surface) !important;
        }

    .tippy-box[data-theme~="dashboard"][data-placement^="top"] > .tippy-arrow::after,
        .tippy-box[data-theme~="dashboard"][data-placement^="bottom"] > .tippy-arrow::after,
        .tippy-box[data-theme~="dashboard"][data-placement^="left"] > .tippy-arrow::after,
        .tippy-box[data-theme~="dashboard"][data-placement^="right"] > .tippy-arrow::after {
            border-color: transparent;
            border-style: solid;
            content: "";
            position: absolute;
            z-index: -1;
        }

    .tippy-box[data-theme~="dashboard"][data-placement^="top"] > .tippy-arrow::after {
            border-top-color: var(--dashboard-color-border-strong);
            border-width: 8px 8px 0;
            bottom: -8px;
            left: 0;
        }

    .tippy-box[data-theme~="dashboard"][data-placement^="bottom"] > .tippy-arrow::after {
            border-bottom-color: var(--dashboard-color-border-strong);
            border-width: 0 8px 8px;
            left: 0;
            top: -8px;
        }

    .tippy-box[data-theme~="dashboard"][data-placement^="left"] > .tippy-arrow::after {
            border-left-color: var(--dashboard-color-border-strong);
            border-width: 8px 0 8px 8px;
            right: -8px;
        }

    .tippy-box[data-theme~="dashboard"][data-placement^="right"] > .tippy-arrow::after {
            border-right-color: var(--dashboard-color-border-strong);
            border-width: 8px 8px 8px 0;
            left: -8px;
        }

    .dashboard-tooltip__table {
            border-collapse: collapse;
            font-size: 0.75rem;
            line-height: 1.25;
            min-width: 13rem;
            text-align: left;
        }

    .dashboard-tooltip__table caption {
            color: var(--dashboard-color-text);
            font-size: 0.8125rem;
            font-weight: 650;
            padding-bottom: 0.375rem;
            text-align: left;
        }

    .dashboard-tooltip__table th,
        .dashboard-tooltip__table td {
            border-top: 1px solid var(--dashboard-color-border);
            padding: 0.3125rem 0.5rem;
            white-space: nowrap;
        }

    .dashboard-tooltip__table th:first-child,
        .dashboard-tooltip__table td:first-child {
            padding-left: 0;
        }

    .dashboard-tooltip__table th:last-child,
        .dashboard-tooltip__table td:last-child {
            padding-right: 0;
        }

    .dashboard-premium-lock {
            align-items: center;
            color: var(--dashboard-color-text-subtle);
            cursor: pointer;
            display: inline-flex;
            gap: 0.375rem;
            justify-content: center;
        }

    .dashboard-premium-lock:hover {
            color: var(--dashboard-color-text);
        }

    .dashboard-premium-lock:focus-visible {
            border-radius: 0.25rem;
            outline: 2px solid var(--dashboard-color-brand);
            outline-offset: 3px;
        }

    .dashboard-premium-lock__icon {
            height: 1rem;
            width: 1rem;
        }

    .dashboard-premium-popover {
            padding: 0.75rem 1rem;
            text-align: center;
            width: min(20rem, calc(100vw - 5rem));
        }

    .dashboard-premium-popover__text {
            color: var(--dashboard-color-text);
            font-size: 0.9375rem;
            line-height: 1.625rem;
        }

    .dashboard-premium-popover__action {
            display: inline-flex;
            margin-top: 1.5rem;
            width: auto;
        }
}