.aw-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;

    padding: var(--header-padding-top) var(--header-padding-horizontal)
        var(--header-padding-bottom);
    min-height: var(--header-height);
    box-shadow: none;

    position: relative;
    z-index: 20;

    transition: none;

    position: sticky;
    top: 0;

    &--is-stuck {
        @apply bg-surface;
        width: 100%;

        box-shadow: 0px 10px 20px 0px rgba(37, 38, 41, 0.05);

        transition: 60ms box-shadow 120ms;
    }

    .aw-progress {
        position: absolute;
        bottom: 2px;
        left: 0;
    }

    &--container {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    &--primary {
        @apply bg-surface;
        width: 100%;

        box-shadow: 0px 10px 20px 0px rgba(37, 38, 41, 0.05);

        transition: 60ms box-shadow 120ms;
    }

    &__title {
        @apply font-body;

        flex: 1 1 calc(100% - 6rem);

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        margin: 0;

        font-size: 1rem;
        line-height: 1.25rem;
        font-weight: 700;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;

        &--showable {
            opacity: 0;
            transform: translateY(50%);
            transition: opacity 200ms, transform 200ms;
        }

        &--visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    &__breadcrumbs {
        align-self: flex-start;
    }

    &__breadcrumbs,
    &__buttons {
        flex: unset;

        display: flex;
        gap: 1rem;
        min-width: 3rem;
    }

    &__buttons {
        justify-content: flex-end;
        flex: none;
        /* align-items: center; */
    }
}

@screen md {
    .aw-page-header {
        &__title {
            flex: 1 1 max-content;
        }
    }
}

@screen lg {
    .aw-page-header {
        /* padding-left: 2.5rem;
    padding-right: 2.5rem; */

        &--container {
            position: static;
            width: var(--header-container-width);
        }

        &--container-small {
            width: calc(
                var(--header-container-width) +
                    ((2 * 80px) - (2 * var(--header-padding-horizontal)))
            );
            padding-left: 80px;
            padding-right: min(
                80px,
                calc((100% - (var(--container-small-width) - 48px)) / 2)
            );
        }

        &--container-default {
            width: calc(
                var(--header-container-width) +
                    ((2 * 80px) - (2 * var(--header-padding-horizontal)))
            );
            padding-left: min(
                    80px,
                    max(var(--default-container-left-padding), calc((100% - (var(--container-width) - 48px)) / 2 ))
            );
            padding-right: min(
                80px,
                max(24px, calc((100% - (var(--container-width) - 48px)) / 2 ))
            );
        }

        &__title {
            font-size: 1.25rem;
            line-height: 1.4285;
        }

        :where(&--container) &__title {
            text-align: left;
        }

        &__breadcrumbs {
            position: absolute;
            left: var(--header-padding-horizontal);
            z-index: 1;
        }

        &__buttons {
            margin-left: auto;
        }

        &__breadcrumbs,
        &__buttons {
            min-width: 2.5rem;
        }

        /* :where(&--container) &__buttons {
        margin-right: max(
            0px,
            calc(
                50% - var(--header-container-width) / 2 +
                    var(--header-padding-horizontal)
            )
        );
    } */
    }
}

@keyframes aw-page-header-slide {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}