@btn-prefix-cls: ~'@{ant-prefix}-btn';

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.@{ps-grid-prefix-cls} {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    box-sizing: border-box;

    &-header {
        display: flex;
        padding: 0 0 5px 0;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .font-noto();
        &-title {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: @font-size-lg;
            i {
                margin: 2px 2px 0 0;
            }
        }
        &-buttons {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        &-row {
            .font-noto();
        }
    }
    &-checkbox {
        &-column-header {
            .font-noto();
        }
    }
    &-content {
        flex: 1 1 auto;
        display: flex;
        position: relative;
    }

    &-footer {
        .@{ps-pagination-prefix-cls} {
            margin: 5px 0 0 0;
        }
    }

    // radioable
    &-radio {
        .ag-checkbox-input-wrapper {
            &.ag-checked {
                &::after {
                    content: '\f125' !important;
                }
            }
            &::after {
                content: '\f124' !important;
            }
        }
    }
    // loading
    &-loading {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primary-6;
        font-size: @font-size-base;
        &:before {
            font-family: 'polestar';
            content: '\E263';
            margin: 0 5px 0 0;
            animation-name: spin;
            animation-duration: 2000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .@{ps-grid-prefix-cls} {
        &-container {
            height: calc(100vh ~'-' 198px);
        }
    }
}

// row disabled
.ps-grid {
    .ag-row-disabled {
        background-color: @gray-1;
        color: @gray-3;
        .ag-checkbox {
            .ag-checked {
                pointer-events: none;
                &::after {
                    color: @gray-3;
                }
            }
        }
    }
}