//@import "../../../abstracts/abstracts";

.dbq-file-streaming-control {
    // border: 2px dashed $modal-border-color;
    // border-radius: 0 0 $border-radius-default $border-radius-default;
    // padding: calc($padding-default * 2);

    // &[data-is-read-only="true"] {
    //     .dbqfsc-file-download {
    //         background: $background-item-color-read-only;
    //     }
    // }

    &[data-is-read-only="false"] {
        .dbqfsc-file-download {
            border-radius: 0;
            border-bottom: 0px;
        }
    }

    &[data-is-read-only="true"] {
        .dbqfsc-file-download-container {
            margin-bottom: 0;
        }

        .dbqfsc-file-download {
            .dbqfsc-file-remove {
                display: none !important;
            }
        }
    }

    .dbqfsc-file-upload-container {
        padding: $padding-default;
        border: 2px dashed $material-design-default-border-color;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        position: relative;
        min-height: 75px;
        background: $modal-input-background;
        
        &.highlight,
        &:hover {
            border-color: $color-primary;
        }

        &.dbqfsc-invalid {
            border-color: $modal-error-border;
        }

        .dbqfsc-file-upload {
            display: flex;
            align-items: center;

            svg {
                display: inline-block;
                width: 48px;
                height: 48px;
                fill: $color-primary;
            }

            span {
                margin-left: 15px;
                font-size: $font-size-medium;
                font-weight: 600;
            }

            .dbqfsc-file-input {
                display: none;
            }

            .dbqfsc-upload-button {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: 0;
                cursor: pointer;
            }      
        }

        .dbqfsc-progress-container {
            display: flex;

            .dbqfsc-progress {
                width: 100%;

                .dbqfsc-progress-bar {
                    height: 20px;
                    position: relative;
                    background: #555;
                    border-radius: 25px;
                    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
                    overflow: hidden;

                    span {
                        display: block;
                        height: 100%;
                        background-color: rgb(43,194,83);
                        background-image: linear-gradient(center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69%);
                        box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
                        position: relative;
                    }

                    // > span:after {
                    //     content: "";
                    //     position: absolute;
                    //     top: 0;
                    //     left: 0;
                    //     bottom: 0;
                    //     right: 0;
                    //     background-image: linear-gradient(
                    //         -45deg,
                    //         rgba(255, 255, 255, 0.2) 25%,
                    //         transparent 25%,
                    //         transparent 50%,
                    //         rgba(255, 255, 255, 0.2) 50%,
                    //         rgba(255, 255, 255, 0.2) 75%,
                    //         transparent 75%,
                    //         transparent
                    //     );
                    //     z-index: 1;
                    //     background-size: 50px 50px;
                    //     animation: move 2s linear infinite;
                    //     border-top-right-radius: 8px;
                    //     border-bottom-right-radius: 8px;
                    //     border-top-left-radius: 20px;
                    //     border-bottom-left-radius: 20px;
                    //     overflow: hidden;
                    // }

                    // .stop-animating > span:after {
                    //     display: none;
                    // }

                    // @keyframes move {
                    //     0% {
                    //         background-position: 0 0;
                    //     }
                    //     100% {
                    //         background-position: 50px 50px;
                    //     }
                    // }
                }
            }

            .dbqfsc-progress-remove-file {

            }
        }
    }

    .dbqfsc-file-download-container {
        display: flex;
        flex-direction: column;
        border: 2px solid $modal-border-color;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        background: $background-item-color-read-only;
        margin-bottom: $global-margin;

        .dbqfsc-file-download {
            display: flex;
            align-items: center;
            padding: $padding-default;

            .dbqfsc-file-download-buttons {
                display: flex;
                gap: 5px;

                .dbqfsc-file-download-button,
                .dbqfsc-file-preview-button {
                    @include button-rounded-with-icon;
                    background: $button-background-color;
                    
                    svg { 
                        fill: $button-text-color;
                    }
                }
            }

            span {
                font-size: $font-size-medium;
                font-weight: 600;
                line-height: 40px;
            }

            .dbqfsc-file-name {
                flex-grow: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .dbqfsc-file-size {
                flex-shrink: 0;
            }

            .dbqfsc-file-remove {
                flex-shrink: 0;
                margin: 0 0 0 5px;
                cursor: pointer;

                svg {
                    fill: $color-gray-dark;
                }

                &:hover {
                    svg {
                        fill: $color-primary;
                    }
                }
            }
        }

        .dbqfsc-file-preview-container {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: $padding-default;

            img {
                cursor: zoom-in;
                max-width: 100%;
                max-height: 200px;
            }
        }
    }

    .dbqfsc-file-empty {
        border: 2px solid $modal-border-color;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        padding: $padding-default;
        background: $background-item-color-read-only;
        font-weight: 700;
        margin-bottom: $global-margin;
    }

    .dbqfsc-progress {

    }
    // .dbqfsc-progress-bar {
    //     width: 100%;
    //     // display: none;

    //     &::-webkit-progress-bar {
    //         background-color: red;
    //         border-radius: 7px;
    //     }
    //     &::-webkit-progress-value {
    //         background-color: orange;
    //         border-radius: 7px;
    //         box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
    //     }
    //     &::-moz-progress-bar {
    //         background-color: purple;
    //     }
    // }
    // .dbqfsc-progress-bar::-webkit-progress-bar {
    //     background-color: red;
    //     border-radius: 7px;
    // }
    // .dbqfsc-progress-bar::-webkit-progress-value {
    //     background-color: orange;
    //     border-radius: 7px;
    //     box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
    // }
    // .dbqfsc-progress-bar::-moz-progress-bar {
    //     background-color: purple;
    // }

    .dbqfsc-file-name {
        font-size: $font-size-small;
    }

    .dbqfsc-file-percentage {
        float: right;
        font-size: $font-size-small;
    }

    .dbqfsc-gallery {
        margin-top: 10px;

        img {
            width: 150px;
            margin-bottom: 10px;
            margin-right: 10px;
            vertical-align: middle;
        }
    }
}

.dbqdb-file-upload.dbq-no-label {
    .dbq-file-streaming-control {
        border-radius: $border-radius-default;
    }
}