@use 'common-mixins';

.red-upload-download-overlay {
    background: var(--iqser-background);
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 8px;
    overflow: hidden;
    width: 400px;
    @include common-mixins.drop-shadow;

    .red-upload-download-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 16px 14px 16px 16px;
        cursor: pointer;

        color: var(--iqser-text);
        font-size: 13px;
        font-weight: 600;
        line-height: 16px;

        mat-icon {
            height: 13px;
            color: var(--iqser-text);

            &.collapse-icon {
                height: 15px;
            }
        }

        iqser-circle-button {
            margin-bottom: 4px;
        }

        &.expanded {
            border-bottom: 1px solid var(--iqser-separator);
        }
    }

    .upload-download-list {
        overflow: auto;
        @include common-mixins.scroll-bar;
        max-height: 260px;

        > div:not(:first-child) {
            .dossier-name-wrapper {
                border-top: 1px solid var(--iqser-separator);
            }
        }

        .dossier-name-wrapper {
            display: flex;
            padding: 4px 16px;
            background-color: var(--iqser-alt-background);

            > span {
                @include common-mixins.line-clamp(1);
            }
        }

        .upload-download-list-item {
            padding: 10px 16px 12px 16px;
            font-size: 11px;
            line-height: 14px;
            border-top: 1px solid var(--iqser-separator);
            position: relative;

            .upload-download-line {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .upload-download-item-name {
                    @include common-mixins.line-clamp(1);

                    &.complete {
                        text-decoration: underline;
                    }
                }

                .progress {
                    margin-left: 10px;
                    font-weight: 600;
                }
            }

            .upload-download-progress {
                margin-top: 8px;
            }

            &.error {
                background-color: rgba(var(--iqser-primary-rgb), 0.1);
                padding-right: 100px;

                .error-message {
                    margin-top: 2px;
                    color: var(--iqser-primary);
                }
            }

            .actions {
                display: none;
                position: absolute;
                align-items: center;
                top: 0;
                right: 0;
                height: 100%;
                padding-right: 10px;

                &.error {
                    display: flex;
                }

                &:not(.error) {
                    background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-alt-background) 35%);
                    padding-left: 60px;
                }
            }

            &:not(.error):hover {
                background-color: var(--iqser-alt-background);

                .actions {
                    display: flex;
                }
            }
        }
    }
}
