:root {
    /* Container */
    --es-margin-top: 0;
    --es-margin-right: 0;
    --es-margin-bottom: 0;
    --es-margin-left: 0;

    --es-padding-top: 1rem;
    --es-padding-right: 1rem;
    --es-padding-bottom: 1rem;
    --es-padding-left: 1rem;

    --es-background-color: white;

    --es-border-radius-top-left: 0;
    --es-border-radius-top-right: 0;
    --es-border-radius-bottom-right: 0;
    --es-border-radius-bottom-left: 0;

    /* Labels */
    --es-labels-gap: 1rem;
    --es-font-weight-label: bold;

    --es-border-radius-top-left-label: 0;
    --es-border-radius-top-right-label: 0;
    --es-border-radius-bottom-right-label: 0;
    --es-border-radius-bottom-left-label: 0;

    --es-color-label: inherit;
    --es-color-active-label: inherit;
    --es-background-color-label: lightgrey;
    --es-background-color-active-label: gray;

    /* Input */
    --es-padding-input: 1rem;
    --es-font-size-input: 1.25em;

    --es-border-radius-top-left-input: 0;
    --es-border-radius-top-right-input: 0;
    --es-border-radius-bottom-right-input: 0;
    --es-border-radius-bottom-left-input: 0;

    --es-border-width-input: 1px;
    --es-border-style-input: solid;
    --es-border-color-input: black;

    /* Button */
    --es-padding-button: 1rem;
    --es-font-size-button: inherit;
    --es-font-weight-button: bold;
    --es-color-button: white;
    --es-background-color-button: darkgrey;

    --es-border-radius-top-left-button: 100vw;
    --es-border-radius-top-right-button: 100vw;
    --es-border-radius-bottom-right-button: 100vw;
    --es-border-radius-bottom-left-button: 100vw;

    --es-border-width-button: 1px;
    --es-border-style-button: solid;
    --es-border-color-button: black;

    --es-color-hover-button: darkgrey;
    --es-background-color-hover-button: white;
    --es-border-color-hover-button: var(--es-border-color-button);

    /* Navigation */
    --es-nav-gap: 1rem;

    --es-nav-margin-top: 0;
    --es-nav-margin-right: 0;
    --es-nav-margin-bottom: 0;
    --es-nav-margin-left: 0;

    --es-nav-padding-top: 0;
    --es-nav-padding-right: 0;
    --es-nav-padding-bottom: 0;
    --es-nav-padding-left: 0;

    --es-color-link: blue;
    --es-color-link-hover: darkblue;
}

/*.cb-external-search {}*/

    .cb-external-search__container {
        container: cb-external-search / inline-size;
        background-color: var(--es-background-color);
        border-radius: var(--es-border-radius-top-left) var(--es-border-radius-top-right) var(--es-border-radius-bottom-right) var(--es-border-radius-bottom-left);
        padding: var(--es-padding-top) var(--es-padding-right) var(--es-padding-bottom) var(--es-padding-left);
        margin: var(--es-margin-top) var(--es-margin-right) var(--es-margin-bottom) var(--es-margin-left);
    }

        /*.cb-external-search__form { }*/

            .cb-external-search__fieldset {
                /* reset fiedlset styles */
                border: 0;
                padding: 0;
                margin: 0;
                display: flex;
                flex-flow: row wrap;
                gap: var(--es-labels-gap);

                @container cb-external-search (width < 500px) {
                    flex-flow: wrap;
                }
            }

            .cb-external-search__action {
                --es-labels-gap: 1rem;
            }

                .cb-external-search__label {
                    --es-border-radius-label: var(--es-border-radius-top-left-label) var(--es-border-radius-top-right-label) var(--es-border-radius-bottom-right-label) var(--es-border-radius-bottom-left-label);

                    display: inline-block;
                    cursor: pointer;
                    font-weight: var(--es-font-weight-label);
                    padding: var(--es-padding-label);
                    border-radius: var(--es-border-radius-label);
                    color: var(--es-color-label);
                    background-color: var(--es-background-color-label);

                    @container cb-external-search (width < 500px) {
                        flex: 1 1 auto;
                    }
                }
                .cb-external-search__label:has(> input:checked),
                .cb-external-search__label.is-active {
                    --es-color-label: var(--es-color-active-label);
                    --es-background-color-label: var(--es-background-color-active-label);
                }

                .cb-external-search__label input[type="radio"] {
                    all: unset;
                    width: 1px;
                    height: 1px;
                }

                .cb-external-search__input {
                    --es-border-radius-input: var(--es-border-radius-top-left-input) var(--es-border-radius-top-right-input) var(--es-border-radius-bottom-right-input) var(--es-border-radius-bottom-left-input);

                    flex-grow: 1;
                    padding: var(--es-padding-input);
                    font-size: var(--es-font-size-input);
                    border: var(--es-border-width-input) var(--es-border-style-input) var(--es-border-color-input);
                    border-radius: var(--es-border-radius-input);
                }

                .cb-external-search__submit {
                    --es-border-radius-button: var(--es-border-radius-top-left-button) var(--es-border-radius-top-right-button) var(--es-border-radius-bottom-right-button) var(--es-border-radius-bottom-left-button);

                    text-align: center;
                    cursor: pointer;
                    font-size: var(--es-font-size-button);
                    font-weight: var(--es-font-weight-button);
                    color: var(--es-color-button);
                    background-color: var(--es-background-color-button);
                    border: var(--es-border-width-button) var(--es-border-style-button) var(--es-border-color-button);
                    border-radius: var(--es-border-radius-button);
                    padding: var(--es-padding-button);

                    &:hover,
                    &:focus {
                        --es-color-button: var(--es-color-hover-button);
                        --es-background-color-button: var(--es-background-color-hover-button);
                        --es-border-color-button: var(--es-border-color-hover-button);
                    }

                    @container cb-external-search (width < 500px) {
                        width: 100%;
                    }
                }


        /*.cb-external-search__nav { }*/

            .cb-external-search__nav-list {
                --es-nav-margin: var(--es-nav-margin-top) var(--es-nav-margin-right) var(--es-nav-margin-bottom) var(--es-nav-margin-left);
                --es-nav-padding: var(--es-nav-padding-top) var(--es-nav-padding-right) var(--es-nav-padding-bottom) var(--es-nav-padding-left);

                gap: var(--es-nav-gap);
                padding: var(--es-nav-padding);
                margin: var(--es-nav-margin);
                list-style: none;
                display: flex;
                flex-flow: row wrap;
            }

            .cb-external-search__nav-list a {
                display: inline-block;
                color: var(--es-color-link);
            }

            .cb-external-search__nav-list a:hover,
            .cb-external-search__nav-list a:focus-visible {
                color: var(--es-color-link-hover);
            }

            .cb-external-search__nav-list li {
                margin: 0;
            }