:root {
    --warning-bubble-bg: #fff8dc;
    --warning-bubble-button-bg: #fff0a8;
    --warning-bubble-border: #d7a91f;
    --warning-bubble-border-strong: #b78a16;
    --warning-bubble-text: #684700;
}

.warning-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.warning-bubble__button {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid var(--warning-bubble-border);
    border-radius: 999px;
    background: var(--warning-bubble-button-bg);
    color: var(--warning-bubble-text);
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.warning-bubble__button:hover,
.warning-bubble__button:focus-visible,
.warning-bubble__button[aria-expanded="true"] {
    border-color: var(--warning-bubble-border-strong);
    background: #ffe38a;
    color: #5d4000;
    outline: none;
    box-shadow: 0 0 0 3px rgba(215, 169, 31, .20);
}

.warning-bubble__panel {
    position: fixed;
    z-index: 10000;
    display: none;
    width: min(25rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: .9rem 1rem;
    border: 1px solid var(--warning-bubble-border);
    border-radius: .8rem;
    background: var(--warning-bubble-bg);
    color: var(--warning-bubble-text);
    box-shadow: 0 .8rem 2rem rgba(85, 61, 0, .14);
    font-size: .94rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.warning-bubble__panel::before {
    content: "";
    position: absolute;
    top: -.48rem;
    left: var(--warning-bubble-pointer-left, 1.5rem);
    width: .85rem;
    height: .85rem;
    border-top: 1px solid var(--warning-bubble-border);
    border-left: 1px solid var(--warning-bubble-border);
    background: var(--warning-bubble-bg);
    transform: rotate(45deg);
}

.warning-bubble__panel[data-placement="top"]::before {
    top: auto;
    bottom: -.48rem;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid var(--warning-bubble-border);
    border-bottom: 1px solid var(--warning-bubble-border);
}

.warning-bubble__panel.is-visible {
    display: block;
}

@media (max-width: 640px) {
    .warning-bubble__panel {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        font-size: 1rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .warning-bubble__button {
        cursor: pointer;
        min-width: 1.65rem;
        min-height: 1.65rem;
    }

    .warning-bubble__button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .warning-bubble__panel.is-visible {
        animation: warning-bubble-in 120ms ease-out;
    }

    @keyframes warning-bubble-in {
        from {
            opacity: 0;
            transform: translateY(-.2rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}