/**
 * Create the container with what's available for the element absolute positioning 😅
 * My goal here is not (or very little) to touch to the template as I don't want to break bootstrap stylings ... 🤮
 */
*:has(> z-email-spell-checker) {
    position: relative;
}

/*
 * If the component has trouble importing or if its direct parent has no focus within
 * we hide the element ...
 */
z-email-spell-checker:not(:defined),
*:has(> z-email-spell-checker):not(:focus-within) z-email-spell-checker {
    display: none!important;
}

/* The element actual styles :)*/
z-email-spell-checker {
    z-index: 1;
    position: absolute;
    inset: auto;
    top: calc(100% - 3px);
    left: 0;
    margin: 0;
    margin-block-start: -3px;
}

z-email-spell-checker::part(suggestion) {
    box-sizing: border-box;
    padding: 0.5rem;
    display: inline-flex;
    place-items: center;
    color: inherit;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 4px 4px 5px rgb(0 0 0 / .2);
    cursor: pointer;
}

z-email-spell-checker::part(suggestion):hover,
z-email-spell-checker::part(suggestion):focus {
    background-color: #eee;
}