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

.@{prefix-cls}-sxyx {
    padding: 6px 10px;

    &-card {
        width: 100%;
        height: 100%;
        background: var(--bg-color2);
        border-radius: 4px;
        box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.02);
        border: 1px solid var(--bg-border-color2);

        &-title {
            display: flex;
            height: 50px;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 25px;

            &-text {
                font-size: 16px;
                font-family: PingFangSC-Medium-, PingFangSC-Medium;
                font-weight: normal;
                color: rgba(0, 0, 0, 0.85);
            }
        }

        &-content {
            height: calc(100% - 50px);
            padding: 18px 25px;
            display: flex;

            &-label {
                font-size: 14px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
            }

            &-value {
                font-size: 14px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.85);
            }
        }
    }

    &-sx-info {
        position: relative;
        width: 70%;
        height: 100px;
        margin: auto 0;

        &-sxHeight {
            position: absolute;
            top: -13px;
            display: flex;
            align-items: center;
        }
        &-sxMaxHeight {
            position: absolute;
            top: 20px;
            display: flex;
            align-items: center;
        }
        &-sxMinHeight {
            position: absolute;
            bottom: -13px;
            display: flex;
            align-items: center;
        }
        &-sxNowHeight {
            position: absolute;
            right: -10px;
            display: flex;
            align-items: center;
        }

        &-line {
            display: inline-block;
            width: 120px;
            height: 0px;
            border: 1px solid rgba(112, 112, 112, 0.24);
            margin-left: 10px;
        }

        .lui-column-bg {
            position: absolute;
            width: 70px;
            height: 100%;
            background-color: rgba(197, 227, 255, 1);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            &::before {
                position: absolute;
                content: '';
                display: block;
                height: 20px;
                width: 100%;
                border-radius: 50%;
                top: -10.5px;
                z-index: 1;
                background: linear-gradient(0deg, #1890ff 0%, #c5e3ff 100%);
            }

            &::after {
                position: absolute;
                content: '';
                display: block;
                height: 15px;
                width: 100%;
                border-radius: 50%;
                bottom: -9.5px;
                background: rgba(24, 144, 255, 0.5);
            }

            .lui-inner {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 50%;
                background: linear-gradient(
                    0deg,
                    rgba(24, 144, 255, 0.3) 0%,
                    rgba(24, 144, 255, 0.5) 100%
                );
                text-align: center;

                &::before {
                    position: absolute;
                    content: '';
                    display: block;
                    height: 20px;
                    width: 100%;
                    background: linear-gradient(0deg, #1890ff 0%, #78beff 100%);
                    border-radius: 50%;
                    top: -10.5px;
                    z-index: 1;
                }

                &::after {
                    position: absolute;
                    content: '';
                    display: block;
                    height: 15px;
                    width: 100%;
                    border-radius: 50%;
                    background: var(--bg-color2);
                    border: 1px solid var(--bg-border-color2);

                    bottom: -10px;
                }
            }
        }
    }
}
