:root {
    --ih-focus-ring: #ffd648;
    --ih-focus-ring-shadow: rgba(17, 24, 39, 0.62);
    --ih-focus-ring-inner: rgba(255, 255, 255, 0.92);
}

:where(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="tab"],
        [tabindex]:not([tabindex="-1"])
    ):focus-visible {
    outline: 3px solid var(--ih-focus-ring) !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 1px var(--ih-focus-ring-inner),
        0 0 0 6px var(--ih-focus-ring-shadow) !important;
}

:where(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="tab"],
        [tabindex]:not([tabindex="-1"])
    ):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none;
}

@supports not selector(:focus-visible) {
    :where(
            a[href],
            button,
            input,
            select,
            textarea,
            summary,
            [role="button"],
            [role="tab"],
            [tabindex]:not([tabindex="-1"])
        ):focus {
        outline: 3px solid var(--ih-focus-ring) !important;
        outline-offset: 3px !important;
        box-shadow:
            0 0 0 1px var(--ih-focus-ring-inner),
            0 0 0 6px var(--ih-focus-ring-shadow) !important;
    }
}

.handleBackgroundButtons:focus-visible,
.whiteboard-left-options button:focus-visible,
.whiteboardColorPicker:focus-visible,
#actionButtons button:focus-visible,
#actionButtonMobileMenu button:focus-visible {
    position: relative;
    z-index: 2;
}

.modal-content :focus-visible {
    scroll-margin: 24px;
}