/* stylelint-disable no-descending-specificity, scss/at-rule-no-unknown */

.SuitePageHeader:not(.SuitePageHeader-grid) {
    margin: calc(-1 * var(--main-content-padding)) calc(-1 * var(--main-content-padding)) 1.5rem;
    align-content: center;
    background: linear-gradient(to bottom, var(--gray-0), var(--gray-50));

    .SuitePageHeader {
        &-body:has(.SuitePageHeader-search) {
            padding: 20px;
            background: var(
                --header-gradient-bg,
                linear-gradient(180deg, var(--gray-0, #fff) 30%, var(--gray-50, #f7f7f8) 100%)
            );
        }

        &-body {
            display: flex;
            flex-direction: column;
            padding: 12px 20px 20px;
            gap: var(--padding-medium-small);

            &-content {
                display: flex;
                gap: var(--padding-large);
                align-items: center;

                &-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }

        // no breadcrumb above means the body is first child: use the 20px Figma top
        &-body:where(:first-child) {
            padding-top: 20px;
        }

        &-metadata {
            display: flex;
            align-items: center;
            gap: var(--padding-medium-small);

            .Pill {
                margin-bottom: var(--padding-medium-small);
            }
        }

        &-main {
            display: flex;
            min-height: 54px;
            align-items: center;
            gap: var(--padding-small);
        }

        &-title {
            margin: 0;
        }

        &-subtitle {
            align-items: center;
            color: var(--text-secondary);
            display: flex;
            margin: 0;

            &-divider {
                margin: 0 var(--padding-medium-small) 0 var(--padding-small);
            }
        }

        &-main-prepend {
            gap: var(--padding-small);
        }

        &-main-append {
            display: flex;
            align-items: center;
            gap: var(--padding-small);
            margin-left: var(--padding-medium-small);

            &-item {
                display: flex;
                align-items: center;
            }
        }

        &-top-metadata {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;

            &-left {
                height: 32px;
            }

            &-left,
            &-right {
                display: flex;
                align-items: center;
                gap: var(--padding-medium-small);
            }
        }

        &-actions {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            flex-shrink: 0;
            gap: var(--padding-medium-large);

            &-scroll-top {
                margin-left: var(--padding-medium-small);
            }
        }

        &-content-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        &-description {
            @include text-body;

            color: var(--text-secondary);
        }

        &-breadcrumb {
            display: flex;
            height: 34px;
            padding: var(--padding-medium-small) var(--padding-large);
            border-bottom: 1px solid var(--dividers-light-stroke);

            .breadcrumb {
                @include text-small;

                display: flex;
                align-items: center;
                font-weight: 500;
                text-transform: none;
            }
        }

        &-search {
            display: flex;
            flex: 1;
            align-items: center;
            padding: 0;
            gap: var(--padding-large, 20px);

            &-container {
                align-items: center;
                height: 48px;
                display: flex;
                flex: 1;
                justify-content: space-between;
                gap: var(--padding-large, 20px);
                border-bottom: 1px solid transparent;

                &-field {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    justify-content: end;
                    gap: var(--padding-medium-large);
                    padding: var(--padding-medium-small) 0;
                    padding-right: var(--padding-medium-large);

                    &-input {
                        @include text-heading(1);

                        background-color: transparent;
                        border: none;
                        padding: 0;
                    }

                    &-clearable {
                        display: flex;
                        gap: var(--padding-large);
                        opacity: 1;
                        transition: opacity 300ms ease;

                        @starting-style {
                            opacity: 0;
                        }
                    }
                }

                &:hover {
                    border-bottom-color: var(--fields-stroke-default, #b9bfc6);
                }
                &:has(.SuitePageHeader-search-container-field-input:hover) {
                    border-bottom: 1px solid var(--fields-stroke-hover, #276b9b);
                }
                &:has(.SuitePageHeader-search-container-field-input:focus-within) {
                    border-bottom: 1px solid var(--fields-stroke-focused, #1d4f72);
                }

                &-actions-filters {
                    display: flex;
                    align-items: center;
                    gap: var(--padding-large);
                }
            }

            &-actions-buttons {
                display: flex;
                align-items: center;
                gap: var(--padding-large);
            }
        }
    }

    &.SuitePageHeader-loading {
        .SuitePageHeader-main {
            margin-bottom: var(--padding-small);
        }
    }

    &.SuitePageHeader-standalone {
        margin: 0;
        background: transparent;
        padding: 0;

        .SuitePageHeader-body,
        .SuitePageHeader-breadcrumb {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

.SuitePageHeader-grid.SuitePageHeader {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content;
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin: calc(-1 * var(--main-content-padding)) calc(-1 * var(--main-content-padding)) 1.5rem;
    padding: 20px;
    background-color: var(--container-fills-backgrounds-default-section);
    box-shadow: 4px 4px 8px 2px rgba(13 36 53 / 4%);
    align-content: center;

    .SuitePageHeader-breadcrumb {
        grid-column: 1 / span 2;
        grid-row: 1;
        border-bottom: 1px solid var(--gray-300);
        padding: 8px 0 7px;
        position: relative;
        top: -20px;

        .breadcrumb {
            font-size: 10px;
            line-height: 15px;
            letter-spacing: 0.75px;
            font-weight: 550;
        }
    }
}

/* Deprecated grid components */
.SuitePageHeader {
    &-row {
        grid-column: 1 / span 2;
        display: flex;
    }

    &-primary {
        display: flex;
        grid-row: 3;
        flex-grow: 1;
        align-items: center;
        min-height: 40px;

        .CoverArt {
            margin-right: 10px;
        }

        h2 {
            margin: 0;
            color: var(--gray-900);
            padding: 2px 0;
        }

        &-title {
            display: flex;
            align-items: center;
            gap: 10px;
            height: 36px;

            .InCatalogGlyphIcon {
                margin-right: -5px;
            }
        }

        &-subtitle {
            display: flex;
            height: 20px;
            line-height: 20px;
            align-items: center;

            .CoverArt {
                display: inline-flex;
                margin-right: 4px;
            }
        }
    }

    &-secondary {
        grid-column: 1;
        grid-row: 2;
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        height: 32px;
        margin-bottom: 10px;

        .Pill {
            margin-left: 0;
        }
    }

    &-tertiary {
        grid-column: 2;
        grid-row: 3;
        flex-grow: 1;
        flex-shrink: 0;
        display: flex;
        justify-content: end;
        gap: 24px;
        align-items: center;
    }

    &-external-links {
        grid-column: 2;
        grid-row: 2;
        flex-grow: 1;
        flex-shrink: 0;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: end;
        margin-bottom: 10px;
    }

    &-description {
        @include text-body;

        grid-column: 1;
        grid-row: 4;
        color: var(--text-secondary);
        margin-top: 10px;
    }
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(-60px);
        visibility: hidden;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

.SuitePageHeader-sticky {
    position: sticky;
    z-index: 5;
    top: -20px;
    display: none;

    &.SuitePageHeader-sticky-visible {
        display: block;
        animation: fade-slide-in 0.2s ease-out forwards;
    }

    &.SuitePageHeader-standalone {
        top: 0;
    }
}

.SuitePageHeader-unified {
    .SuitePageHeader-main {
        min-height: unset !important;
    }
}

// Small appearance (compact layout, visual styling)
.SuitePageHeader-small.SuitePageHeader-unified {
    background: linear-gradient(to bottom, var(--gray-0), var(--gray-50));
    box-shadow: var(--Shadows-XY-Axis-Medium-Default, 4px)
        var(--Shadows-XY-Axis-Medium-Default, 4px) var(--Shadows-Blur-Medium, 8px)
        var(--Shadows-Spread-Medium, 2px) var(--Shadows-Color-Medium, rgb(13 36 53 / 8%));

    .SuitePageHeader-standalone & {
        background: none;
        background-color: var(--container-fills-backgrounds-page);

        .SuitePageHeader-body {
            padding: 0 0 8px;
        }
    }

    .SuitePageHeader-body {
        padding: var(--padding-medium-small) var(--padding-large);

        &-content {
            gap: var(--padding-medium-large) !important;
        }
    }

    .SuitePageHeader-unified-bottom-metadata {
        margin: 0 !important;
    }

    .SuitePageHeader-main {
        min-height: 0 !important;
    }

    .SuitePageHeader-title {
        @include text-heading(4);

        font-weight: 500;
    }

    .SuitePageHeader-subtitle {
        @include text-heading(4);
    }

    .SuitePageHeader-actions {
        gap: var(--padding-medium);
    }

    .CoverArt {
        height: 30px !important;
        width: unset !important;
        align-self: center;
        aspect-ratio: 1;
    }
}