/**
 * common styles for header
 */

@media (max-width : 800px) {
    #trial-button {
        display : none;
    }
}

.demo-header {
    display                    : flex;
    padding-inline             : 0.7em 0;
    padding-block              : 0;

    transition                 : background-color var(--b-default-transition-duration), padding var(--b-default-transition-duration), font-size .1s;
    border-bottom              : 1px solid var(--b-border-7);

    /* DemoHeader.js gets this from being a widget, match here */
    &, * {
        box-sizing : border-box;
    }

    a {
        text-decoration : none;
    }

    .b-icon {
        font-size : 1.1em;
    }

    .title {
        margin-inline-end : auto;
        display           : flex;
        align-items       : center;
        white-space       : nowrap;
        color             : var(--b-text-1);

        &:focus-visible {
            outline-offset : var(--b-button-focus-outline-offset);
            outline        : var(--b-button-focus-outline-width) solid var(--b-widget-focus-outline-color);
            border-radius  : var(--b-widget-border-radius);
        }

        h1 {
            display     : flex;
            align-items : center;
            margin      : 0;
            font-weight : 600;
            font-size   : 1.1em;
        }

        svg {
            margin-inline-end  : .75em;
            height             : 2em;
            width              : 2em;
            background         : #0076f8;
            padding-inline-end : .2em;
            border-radius      : 5px;

            g {
                fill : #fff;
            }
        }
    }

    .b-toolbar {
        font-size              : .9em;

        --b-toolbar-padding    : 0.7em;
        --b-toolbar-background : transparent;
    }

    #tools {
        display          : flex;
        align-items      : center;
        background-color : transparent;
        font-size        : .9em;
        gap              : 0.5em;
        padding          : 0.7em;
    }

    .b-button-text {
        --b-button-type-text-hover-background : var(--b-neutral-100);
    }

    #trial-button,
    .b-button-filled {
        margin-inline-end : 1em;
    }
}
