@import '../../style/index';

.@{prefix-cls}-basic {
    display: flex;
    gap: 10px;
    height:calc(~'75vh - 120px'); 
    padding: 6px 10px;
    &-left {
        width: 100%;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .ant-tabs {
            .ant-tabs-nav {
                margin: 0;
                .ant-tabs-nav-wrap {
                    padding-left: 20px;
                }
            }
        }

        &--info {
            flex: 1;
            padding: 20px;
            background: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);

            overflow-y: auto;
        }
        &--summary {
            height: 150px;
            padding: 20px;
            background: var(--bg-color2);
            border: 1px solid var(--bg-border-color2);
        }
    }
    &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        background: var(--bg-color2);
        border: 1px solid var(--bg-border-color2);

        padding: 20px;
    }
}

.@{prefix-cls}-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    &-item {
        display: flex;
        gap: 10px;
        align-items: center;
        .right {
            .name {
                color: rgba(0, 0, 0, 0.65);
            }
            .num {
                color: rgba(0, 0, 0, 0.85);
                font-size: 22px;
                & > span {
                    font-size: 12px;
                }
            }
        }
    }
}
