.chart-container {
    [theme='light'] & {
        --bgcolor            : #fff;
        --slider-border-color: #b2c4dd;
        --slider-bgcolor     : #edf2f7;
        --slider-button-color: #b2c4dd;
        --row-border-color   : #dae5ec;
        --row-title-color    : #acb8c0;
        --row-content-color  : #3c454b;
        --tik-title-bgcolor  : #ECF2F5;
        --tik-title-color    : #7A8A94;
    }

    display         : flex;
    width           : 100%;
    height          : calc(100% - 41px);
    background-color: var(--bgcolor, #0e0e0f);

    .chart-slider {
        display         : flex;
        justify-content : center;
        align-items     : center;
        width           : 6px;
        border-left     : 1px solid var(--slider-border-color, #33393d);
        border-right    : 1px solid var(--slider-border-color, #33393d);
        background-color: var(--slider-bgcolor, #0e0e0f);

        &__button {
            width           : 2px;
            height          : 30px;
            font-size       : 0;
            background-color: var(--slider-button-color, #3c454b);
            border-radius   : 1px;
        }
    }

    .chart-tips {
        display       : flex;
        flex-direction: column;
        width         : 300px;
        height        : 100%;

        &__nav {
            display        : flex;
            justify-content: center;
            align-items    : center;

            .content {
                &:first-child:not(:last-child) {
                    margin-right: 16px;
                }

                &--left {
                    font-size: 16px;
                    color    : var(--row-content-color, #ACB8C0);
                }

                &--right {
                    font-size: 24px;
                    color    : #fc9618;
                }
            }
        }

        &__last {
            display        : flex;
            justify-content: center;
            align-items    : center;
            padding        : 16px 0;

            .content {
                &--left {
                    font-size   : 24px;
                    margin-right: 16px;
                }

                &--right {
                    display       : flex;
                    flex-direction: column;
                    align-items   : flex-start;
                }
            }
        }

        &__volume {
            .ant-row {
                border-top: 1px solid var(--row-border-color, #171B1D);
                padding   : 8px;

                .ant-col {
                    text-align: left;

                    &:first-child {
                        color: var(--row-title-color, #3c454b);
                    }

                    &:last-child {
                        color     : var(--row-title-color, #acb8c0);
                        text-align: right;
                    }
                }
            }
        }

        &__tik {
            flex          : 1;
            display       : flex;
            flex-direction: column;
            overflow-y    : auto;

            .ant-row {
                padding: 0 8px;

                .ant-col {
                    text-align: right;

                    &:first-child {
                        text-align: left;
                    }
                }
            }

            .row-header {
                h4 {
                    text-align      : left;
                    line-height     : 30px;
                    color           : var(--tik-title-color, #7A8A94);
                    background-color: var(--tik-title-bgcolor, #171B1D);
                    padding         : 0 8px;
                }

                .ant-row {
                    .ant-col {
                        color: var(--row-title-color, #3c454b);
                    }
                }
            }

            .row-content {
                flex      : 1;
                overflow-y: auto;

                .ant-row {
                    margin-top: 4px;

                    .ant-col {
                        color: var(--row-content-color, #ACB8C0);
                    }
                }
            }
        }

        &__info {
            border-top: 1px solid var(--row-border-color, #171B1D);
            padding   : 8px 8px 8px 0;

            .ant-row {
                margin-top: 4px;

                .ant-col {
                    text-align: left;

                    &:nth-child(odd) {
                        color       : var(--row-title-color, #3c454b);
                        padding-left: 8px;
                    }

                    &:nth-child(even) {
                        color     : var(--row-content-color, #ACB8C0);
                        text-align: right;
                    }
                }
            }
        }
    }
}