// @import "sinosun-ui/lib/style/themes/default.less";
// @import "sinosun-ui/lib/style/mixins/index.less";

@prefix-cls: ~'relate-apply-list';

.@{prefix-cls} {
    &.sn-list-item {
        .sn-list-item-value {
            height: auto;
        }
        .sn-list-item-title {
            display: none;
            text-align: left;
        }
        .title-align-right {
            text-align: right !important;
            & + .sn-list-item-value {
                padding-left: 0.3rem;
            }
        }
        .sn-relate-list-info {
            padding: 0;
            .sn-relate-list-tip {
                text-align: left;
                color: @text-color-5;
                &.has-value {
                    color: @text-color;
                }
            }
        }
    }
    // 列表
    &-con {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .@{prefix-cls}-item {
            position: relative;
            padding-right: 0.16rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &-name {
                display: block;
                color: @success-color;
                border-radius: 0.1rem;
                // font-size: @font-size-base;
                font-size: 0.26rem;
                text-align: left;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            em {
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            &-del {
                padding-left: 0.2rem;
                color: @danger-color;
                font-size: @font-size-base;
            }
        }
    }
}

// 移动端
@media screen and (max-width: @screen-sm) {
    .@{prefix-cls} {
        // 距顶部距离
        &-con {
            padding-top: 0.1rem;
            .@{prefix-cls}-item {
                width: 100%;
                flex-basis: 100%;
            }
        }
    }
}
// pc中屏
@media screen and (min-width: @screen-md) {
    .@{prefix-cls} {
        &.sn-list-item {
            .sn-list-item-title {
                display: block;
            }
        }
        // 列表
        &-con {
            .@{prefix-cls}-item {
                width: 50%;
                flex-basis: 50%;
            }
        }
    }
}
// pc大屏
@media screen and (min-width: @screen-lg) {
    // 列表
    .@{prefix-cls} {
        &-con {
            .@{prefix-cls}-item {
                width: 33.333%;
                flex-basis: 33.33%;
            }
        }
    }
}