@list-files-pipe-height: 31px;
@list-files-pipe-bg: #d2a550;
@list-files-pipe-color: #fcbd46;

@list-files-icon-size: 18px;
@list-files-icon-background: #2a384e;
@list-files-icon-color: @color-f;
@list-files-icon-font-size: 10px;
@list-files-item-gap: 24px;

.list-files {
    .reset-ul();
    margin: 0 -@list-files-item-gap/2;

    font-size: 0;

    &__wrap {
        padding: 22px;
        background: @color-f;
    }

    &__item {
        display: inline-block !important;
        width: 100%;
        vertical-align: top;
        margin: 0;
        padding: 0 @list-files-item-gap/2 @list-files-item-gap @list-files-item-gap/2;

        @media @query-md {
            width: calc(~"100% / 4");
        }

        &__in {
            position: relative;

            border: 1px solid @color-f;
            border-radius: @radius;

            .list-files__item:first-child & {
                border-color: @color-orange;
            }

            &--removed {
                opacity: 0.3;
            }
        }

        &__file {
            display: block;
            height: 164px;
            position: relative;

            border: 1px solid darken(@color-border-light, 10%);
            border-radius: @radius;
            background: @color-f;

            .list-files__item:first-child & {
                border: 1px solid @color-f;
            }

            &__type {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                line-height: 144px;

                text-align: center;
                font-size: 60px;
                color: @color-base;
                cursor: default;

                &--pdf {
                    color: @color-red;
                }
                &--excel {
                    color: darken(@color-green, 7%);
                }
                &--word {
                    line-height: 136px;

                    color: @color-blue;
                }
                &--xml {
                    color: @color-orange;
                }
            }
        }

        input[name="product_form[imageGroup][images][uploadedFilenames][]"],
        input[name="category_form[image][image][uploadedFilenames][]"],
        input[name="transport_form[image][image][uploadedFilenames][]"],
        input[name="payment_form[image][image][uploadedFilenames][]"]
        {
            display: none;
        }

        img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            margin: auto;

            text-align: center;
        }

        &__remove,
        &__move,
        &__revert {
            position: absolute;
            width: @list-files-icon-size;
            height: @list-files-icon-size;
            line-height: @list-files-icon-size;
            top: -@list-files-icon-size/2;
            right: -@list-files-icon-size/2;
            z-index: 3;

            .svg {
                display: block;
                line-height: @list-files-icon-size;
                width: @list-files-icon-size;
                height: @list-files-icon-size;
                font-size: @list-files-icon-font-size;
                background-color: @list-files-icon-background;
                color: @list-files-icon-color;
                border-radius: 50%;
                text-align: center;
                cursor: pointer;

                &:hover {
                    color: @list-files-icon-color;
                }
            }
        }

        &__revert {
            cursor: help;
        }

        &__move {
            left: -@list-files-icon-size/2;
            right: auto;

            .svg {
                font-size: @list-files-icon-font-size + 2px;
                cursor: move;
            }
        }

        &__overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 60px;
            margin: -30px 0 0 -60px;
            z-index: 2;
            vertical-align: middle;
            padding: 10px;
            line-height: 20px;
            display: none;

            text-align: center;
            background: rgba(255,255,255, 0.7);

            span {
                display: inline-block;
            }

            &__show {
            	display: block;
            }
        }

        &__main {
            display: none;

            .list-files__item:first-child & {
                position: absolute;
                display: block;
                top: 0px;
                left: 0px;
                height: 19px;
                line-height: 19px;
                padding: 0 8px;

                background: @color-orange;
                border-bottom-right-radius: @radius;
                font-size: 10px;
                font-weight: 700;
                text-align: center;
                color: @color-f;

            }
        }

        &__pipe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 122px;
            height: @list-files-pipe-height;
            margin: -@list-files-pipe-height/2 0 0 -60px;
            line-height: @list-files-pipe-height;

            border-radius: @radius;
            background: @list-files-pipe-bg;

            &__line {
                display: block;
                position: relative;
                height: @list-files-pipe-height;
                width: 0;

                background: @list-files-pipe-color;
                border-radius: @radius;
                text-align: center;
                color: @color-f;
                font-weight: 700;

                &__value {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    padding: 0 5px;

                    color: @color-f;
                }
            }
        }

        &__info {
            display: block;
            padding: 10px;
            margin-top: 10px;

            font-size: 10px;
            word-wrap: break-word;
        }
    }
}