:host {
    display: block;
    padding: 3% 5%;
}

.pf-c-page {
    --pf-c-page--BackgroundColor: transparent;
    --pf-c-page__main-section--BackgroundColor: transparent !important;
}

.pf-c-page__header {
    --pf-c-page__header--BackgroundColor: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: row wrap;
    gap: var(--pf-global--spacer--lg);
    container-type: inline-size;

    .pf-c-page__title {
        margin: 0;
        flex: 1 1 auto;
    }

    search {
        display: flex;
        flex: 0 0 36ch;

        @container (width < 650px) {
            flex: 1 1 36ch;

            &::part(search-input) {
                font-size: var(--pf-global--FontSize--md);
            }
        }

        form {
            flex: 1 1 auto;
        }
    }
}

.pf-c-page__main {
    overflow: hidden;
}

.pf-c-page__main-section {
    padding-inline: 0;
}

input[name="application-search"] {
    background-color: transparent;
    display: block;
    width: 100%;
    font-size: var(--pf-global--FontSize--xl);

    border-inline: none;
    border-block-start: none;

    &:focus,
    &:hover {
        --pf-c-form-control--BorderBottomColor: var(--ak-accent);
    }

    /**
     * Despite the misleading name, this refers to the chevron appearing next to the
     * search input, which we want to hide since it overlaps with the native search reset icon.
     */
    &::-webkit-calendar-picker-indicator,
    &::-webkit-list-button {
        display: none !important;
        -webkit-appearance: none;
    }

    @media not (prefers-contrast: more) {
        outline: none;
    }
}
