qs-reg-lookup {
    --animation-speed: .5s;
    --animation-easing: cubic-bezier(0.66, 0, 0.33, 1);
    display: grid;
    grid-template:
        "input"
        "button";
    grid-gap: 1em;
    place-content: flex-start center;
    & qs-text-input {
        grid-area: input;
        --input-colour: var(--primary-accent-colour);
    }
    & qs-text-input input {
        text-transform: uppercase;
    }
    & .searchButtons {
        grid-area: button;
        display: grid;
        grid-template-rows: auto 1fr;
        transition: grid var(--animation-speed);
        & button {
            font-size: var(--font-size-step--3);
            width: 10em;
            min-height: 3.6em;
            place-self: flex-start flex-end;
            z-index: 2;
            transition:
                all var(--animation-speed) var(--animation-speed),
                width var(--animation-speed) var(--animation-speed) var(--animation-easing),
                min-height var(--animation-speed) var(--animation-speed) var(--animation-easing),
                opacity var(--animation-speed);
        }
        & span {
            font-size: var(--font-size-step--3);
            overflow: hidden;
            transition: opacity var(--animation-speed) var(--animation-speed);
            &.hide {
                opacity: 0;
                transition: opacity var(--animation-speed);
            }
        }
        &:has(span.hide) {
            grid-template-rows: auto 0fr;
            transition: grid var(--animation-speed) var(--animation-speed);
        }
    }
    & .lookupResultSummary {
        grid-area: button;
        width: 100%;
        opacity: 0;
        color: #333333;
        background-color: var(--info-box-colour);
        font-size: var(--font-size-step--3);
        font-weight: 700;
        line-height: 1.5;
        margin: 0;
        padding: 0 1.75em;
        border: none;
        border-radius: .5em;
        border: 2px solid var(--info-box-colour);
        z-index: 1;
        list-style-type: none;
        transition: opacity var(--animation-speed);
        pointer-events: none;
        & h3 {
            font-size: var(--font-size-step--1);
            margin: .5em 0;
        }
        & p {
            font-size: var(--font-size-step--3);
            font-weight: 400;
            margin: .5em 0;
        }
        & a {
            display: block;
            margin: .5em 0;
        }
    }
    &.reveal {
        & button {
            width: 100%;
            min-height: 100%;
            opacity: 0;
            color: #333333;
            background-color: var(--info-box-colour);
            border-color: var(--info-box-colour);
            border-radius: .5em;
            transition:
                all var(--animation-speed),
                width var(--animation-speed) var(--animation-easing),
                min-height var(--animation-speed) var(--animation-easing),
                opacity var(--animation-speed) calc(var(--animation-speed)),
                color var(--animation-speed),
                border-color var(--animation-speed),
                background-color var(--animation-speed);
            pointer-events: none;
        }
        & .lookupResultSummary {
            opacity: 1;
            pointer-events: initial;
            transition: opacity var(--animation-speed) calc(var(--animation-speed));
        }
    }
    &.skip-anims {
        --animation-speed: 0s;
    }
}