.live-player-warp {
    display: flex;
    height: 100%;

    .live-player-content {
        display: flex;
        flex: 1;
        flex-direction: column;

        .player-screen-tool {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            .ant-radio-button-wrapper {
                height: auto;
                padding: 4px 20px;
            }
        }

        .player-body {
            flex: 1;

            .player-screen {
                position: relative;
                display: grid;
                box-sizing: border-box;
                height: 100%;

                &.screen-1 {
                    grid-template-columns: 1fr;
                }

                &.screen-4 {
                    grid-template-rows: 1fr 1fr;
                    grid-template-columns: 1fr 1fr;
                }

                &.screen-9 {
                    grid-template-rows: 1fr 1fr 1fr;
                    grid-template-columns: 1fr 1fr 1fr;
                }

                &.screen-4,
                &.screen-9 {
                    grid-gap: 12px;
                }

                .active {
                    position: relative;
                    &::after {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        z-index: 99;
                        border: 2px solid red;
                        pointer-events: none;
                    }
                }

                .full-screen {
                    border: 1px solid #fff;
                }

                .player-screen-item {
                    position: relative;

                    .media-btn-refresh {
                        position: absolute;
                        top: 4px;
                        right: 4px;
                        z-index: 2;
                        padding: 2px 4px;
                        font-size: 12px;
                        background-color: #f0f0f0;
                        border-radius: 2px;
                        cursor: pointer;

                        &:hover {
                            background-color: #d9d9d9;
                        }

                        &:active {
                            background-color: #bfbfbf;
                        }
                    }
                }
            }
        }
    }
}
