.blazor-grid-wrapper {
    position: relative;
    height: 100%;
    min-height: 250px;

    .grid-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        background: $bzg-overlay-bg;
        z-index: 100;
    }

    .blazor-grid {
        height: 100%;
        max-height: inherit;
        min-height: inherit;
        background-color: inherit;
        overflow-y: auto;
        overflow-x: hidden;

        .grid-scrollview {
            display: grid;
            height: 100%;
            align-content: start;
            background-color: inherit;
            min-width: 0;

            > *:not(.grid-row), .grid-row-span-all {
                grid-column: 1/-1;
            }

            .grid-row-stretch {
                justify-self: stretch;
                height: 100%;
            }
        }

        .grid-row {
            display: contents;

            &.grid-row-placeholder .grid-cell-placeholder {
                display: block;
                user-select: none;
                border-radius: $bzg-placeholder-border-radius;
                background: $bzg-placeholder-bg;
                overflow: hidden;
                position: relative;

                > span {
                    top: 0;
                    position: absolute;
                    display: block;
                    width: 400px;
                    height: 100%;
                    animation: placeholderBackground 5s infinite ease-in-out;
                    background: linear-gradient(270deg, transparent, $bzg-placeholder-foreground, $bzg-placeholder-foreground, transparent);
                    background-size: 400px 100%;
                }
            }

            > * {
                padding: $bzg-cell-padding-x $bzg-cell-padding-y;
                border-bottom: $bzg-cell-border-bottom-width solid $bzg-cell-border-color;
                border-left: $bzg-header-cell-hover-left-border-width solid transparent;
                // This border will balance out the bottom border to make sure
                // the content is perfectly centered vertically
                border-top: $bzg-cell-border-bottom-width solid transparent;
                white-space: nowrap;
                min-width: 0;
                overflow: visible;
            }

            &.grid-header {
                background-color: inherit;

                > * {
                    top: 0;
                    position: sticky;
                    white-space: nowrap;
                    background: $bzg-header-bg-color;
                    z-index: 10;
                    font-weight: bold;

                    &:first-child {
                        border-left-color: transparent !important;
                    }

                    .blazor-grid-sort-icon::after {
                        opacity: $bzg-header-sort-icon-opacity;
                        content: $bzg-header-sort-icon-content;
                        font-size: $bzg-header-sort-icon-font-size;
                        letter-spacing: $bzg-header-sort-icon-letter-spacing;
                        line-height: 100%;
                        display: inline-block;
                        min-width: 1.5rem;
                        text-align: center;
                    }

                    &.sorted {
                        .blazor-grid-sort-icon::after {
                            opacity: $bzg-header-sort-icon-active-opacity !important;
                            color: $bzg-header-sort-icon-active-color;
                            letter-spacing: $bzg-header-sort-icon-active-letter-spacing;
                        }

                        .blazor-grid-sort-icon.sorted-asc::after {
                            content: $bzg-header-sort-icon-asc-content;
                        }

                        .blazor-grid-sort-icon.sorted-desc::after {
                            content: $bzg-header-sort-icon-desc-content;
                        }
                    }

                    &.sortable {
                        cursor: pointer;

                        &:hover,
                        &:focus {
                            color: $bzg-header-cell-hover-color !important;
                            background: $bzg-header-cell-hover-bg;

                            .blazor-grid-sort-icon::after {
                                opacity: 0.5;
                            }
                        }

                        &:active {
                            background: $bzg-cell-active-bg;
                        }
                    }
                }

                &:hover {
                    > *:not(:first-child) {
                        border-left: $bzg-header-cell-hover-left-border-width solid $bzg-header-cell-hover-bg;
                    }
                }
            }

            &.highlighted, &.highlighted.clickable {
                > *, &:hover > * {
                    background: $bzg-cell-highlighted-bg;
                    color: $bzg-cell-highlighted-color;
                }
            }

            &.clickable {
                cursor: pointer;

                &:hover,
                &:focus {
                    > * {
                        background-color: $bzg-cell-hover-bg;
                        color: $bzg-cell-hover-color;
                    }
                }

                &:active {
                    > * {
                        background-color: $bzg-cell-active-bg;
                        color: $bzg-cell-active-color;
                    }
                }
            }
        }
    }
}

@keyframes placeholderBackground {
    0% {
        transform: translateX(-400px);
    }

    to {
        transform: translateX(100vw);
    }
}
