// main: backend.scss
@import "colors";

fieldset .suggest.wizard input:focus ~ .suggest_wizard,
fieldset .suggest.wizard .suggest_wizard:hover {
    display: block;
}

.widget:has(.suggest_wizard) {
    position: relative;
}

fieldset .suggest_wizard {

    position: absolute;
    display: none;
    width: calc(100% - 24px);
    background: $col-white;

    ul {

        margin: unset;
        padding: unset;
        border: 1px solid $col-gray;

        li {
            padding: 6px 5px;
            cursor: pointer;

            + li {
                border-top: 1px solid $col-gray;
            }

            &:hover {
                background: $col-gray;
            }
        }
    }
}

html[data-color-scheme="dark"] {

    fieldset .suggest_wizard {

        background: var(--content-bg);

        ul {

            border-color: var(--content-border);

            li {

                + li {
                    border-color: var(--content-border);
                }

                &:hover {
                    background: var(--nav-hover-bg);
                }
            }
        }
    }

}