/*
* created by zhongzheng at 2019.11.18
*/
@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@list-item-prefix-cls: ~"@{sino-prefix}-list-item";

.@{list-item-prefix-cls} {
    .bb1px(@color: @list-item-border-color, @left: @list-item-border-bottom-left, @right: @list-item-border-bottom-right);
    position: relative;
    display: flex;
    width: 100%;
    padding: @list-item-horizontal-padding @list-item-vertical-padding;
    overflow: hidden;
    color: @list-item-text-color;
    font-size: @list-item-font-size;
    line-height: @list-item-line-height;
    background-color: #ffffff;

    &-borderless:after {
        display: none;
    }

    &-border-indentless:after {
        left: 0;
    }

    &-label {
        margin-top: @list-item-label-margin-top;
        color: @list-item-label-color;
        font-size: @list-item-label-font-size;
        line-height: @list-item-label-line-height;
    }

    &-title,
    &-value {
        flex: 1;
    }

    &-title {

        &[class*=label-number] {
            flex: 0 1 auto;
        }

        &.@{list-item-prefix-cls}-label-number-2 {
            flex-basis: .86rem;
            width: .86rem;
        }

        &.@{list-item-prefix-cls}-label-number-3 {
            flex-basis: 1.16rem;
            width: 1.16rem;
        }

        &.@{list-item-prefix-cls}-label-number-4 {
            flex-basis: 1.46rem;
            width: 1.46rem;
        }

        &.@{list-item-prefix-cls}-label-number-5 {
            flex-basis: 1.76rem;
            width: 1.76rem;
        }

        &.@{list-item-prefix-cls}-label-number-6 {
            flex-basis: 2.06rem;
            width: 2.06rem;
        }

        &.@{list-item-prefix-cls}-label-number-7 {
            flex-basis: 2.36rem;
            width: 2.36rem;
        }

        &.@{list-item-prefix-cls}-label-number-8 {
            flex-basis: 2.66rem;
            width: 2.66rem;
        }

        &.@{list-item-prefix-cls}-label-number-9 {
            flex-basis: 2.96rem;
            width: 2.96rem;
        }
    }

    &-value {
        position: relative;
        overflow: hidden;
        color: @list-item-value-color;
        text-align: right;
        vertical-align: middle;

        &&-position-left {
            text-align: left;
        }
    }

    &-left-icon,
    &-right-icon {
        min-width: 1em;
        font-size: @list-item-icon-size;
        line-height: @list-item-line-height;
    }

    &-left-icon {
        margin-right: .1rem;
    }

    &-right-icon {
        margin-left: .1rem;
        color: @list-item-right-icon-color;

        &[class*=icon-right] {
            font-size: .24rem;
            ;
            color: @list-item-right-icon-arrow-color;
        }
    }

    &-clickable {
        &:active {
            background-color: @list-item-active-color;
        }
    }

    &-required {
        overflow: visible;

        >.@{list-item-prefix-cls}-title>span::after {
            content: '*';
            margin-left: .04rem;
            color: @list-item-required-color;
            font-size: @font-size-sm;
            line-height: 1;
        }
    }

    &-center {
        align-items: center;
    }
}

@media (min-width: @screen-sm) {
    .@{list-item-prefix-cls} {
        font-size: @pc-font-size-base;

        &-title {

            &.@{list-item-prefix-cls}-label-number-5 {
                flex-basis: 80px;
                width: 80px;
            }

            &.@{list-item-prefix-cls}-label-number-6 {
                flex-basis: 80px + @pc-font-size-base;
                width: 80px + @pc-font-size-base;
            }

            &.@{list-item-prefix-cls}-label-number-7 {
                flex-basis: 80px + @pc-font-size-base * 2;
                width: 80px + @pc-font-size-base * 2;
            }

            &.@{list-item-prefix-cls}-label-number-8 {
                flex-basis: 80px + @pc-font-size-base * 3;
                width: 80px + @pc-font-size-base * 3;
            }

        }
    }
}
