@import "./base/var";
@import "./mixins/index.scss";


@mixin list-size($size) {
    $padding-vertical: $--list-item-padding-vertical-default;
    $padding-horizontal: $--list-item-padding-horizontal-default;
    $fontSize: $--font-size-default;
    $avatarWidth: $--list-item-avatar-width-default;

    @if ($size == 'mini') {
        $padding-vertical: $--list-item-padding-vertical-mini;
        $padding-horizontal: $--list-item-padding-horizontal-mini;
        $fontSize: $--font-size-mini;
        $avatarWidth: $--list-item-avatar-width-mini;
    } @else if ($size == 'small') {
        $padding-vertical: $--list-item-padding-vertical-small;
        $padding-horizontal: $--list-item-padding-horizontal-small;
        $fontSize: $--font-size-small;
        $avatarWidth: $--list-item-avatar-width-small;
    } @else if ($size == 'large') {
        $padding-vertical: $--list-item-padding-vertical-large;
        $padding-horizontal: $--list-item-padding-horizontal-large;
        $fontSize: $--font-size-large;
        $avatarWidth: $--list-item-avatar-width-large;
    }

    @include e((header, footer), false) {
        padding: $padding-vertical $padding-horizontal;
        font-size: $fontSize;
    }

    @include ci(list-item) {
        padding: $padding-vertical $padding-horizontal;
        font-size: $fontSize;

        &__avatar {
            width: $avatarWidth;
            height: $avatarWidth;
            line-height: $avatarWidth;
            margin-right: $padding-horizontal;
        }

        &__extra {
            margin-left: $padding-horizontal;
        }

        &__label, &__value {
            padding-top: $padding-vertical;
            padding-bottom: $padding-vertical;
            padding-left: #{$padding-horizontal / 2};
            padding-right: #{$padding-horizontal / 2};
        }
    }
}

@include c(list) {
    background-color: $--color-white;
    position: relative;

    @include e(header) {
        font-weight: 500;
        color: $--color-text-title;
    }
    @include e(footer) {
        margin-top: -1px;
    }
    @include m(border) {
        border: $--border-default;
        border-radius: $--border-radius-default;
    }

    @include m(mini) {
        @include list-size(mini)
    }
    @include m(small) {
        @include list-size(small)
    }
    @include m(default) {
        @include list-size(default)
    }
    @include m(large) {
        @include list-size(large)
    }
}

@include c(list-row) {
    @include clear-float;
    @include ci(list-item) {
        float: left;
        padding: 0;
        border: none;
    }
}

@include c(list-item) {
    margin-top: -1px;
    &:first-child {
        margin-top: 0;
    }

    @include e(row) {
        display: flex;
        margin-top: -1px;
    }
    @include e(label) {
        flex: none;
        font-weight: 500;
        text-align: right;
        word-break: break-all;
    }
    @include e(value) {
        flex: 1;
        margin-left: -1px;
        word-break: break-all;
    }

    @include m(split) {
        border-bottom: $--border-default;
        border-top: $--border-default;
        @include m(row, false, true) {
            border-bottom: none;
            border-top: none;
        }
        @include e(row, false) {
            border-bottom: $--border-default;
            border-top: $--border-default;
        }
        @include e((label, value), false) {
            border-left: $--border-default;
            border-right: $--border-default;
        }
    }


    @include m(hover) {
        transition: background-color $--animation-time;
        &:hover {
            background-color: $--background-color-hover;
        }
        @include m(row, false, true) {
            transition: none;
            &:hover {
                background-color: transparent;
            }
        }

        @include e(row, false) {
            transition: background-color $--animation-time;
            &:hover {
                background-color: $--background-color-hover;
            }
        }
    }

    @include m(first-no-border) {
        &:first-child {
            border-top: none;
        }
    }
    @include m(last-no-border) {
        &:last-child {
            border-bottom: none;
        }
    }


    @include m(meta, false, true) {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    @include e(avatar) {
        border-radius: $--border-radius-circle;
        overflow: hidden;
        flex: none;
        text-align: center;
        img {
            width: 100%;
            height: 100%;
        }
    }
    @include e(content) {
        flex: 1;
        overflow: hidden;
        word-wrap: break-word;

        @include e(title, false) {
            color: $--color-text-title;
            margin-bottom: 5px;
            font-weight: 500;
        }

        @include e(description, false) {
            color: $--color-text-des;
            margin-bottom: 5px;
        }
    }
    @include e(extra) {
        flex: none;
    }
}
