@import url('../../../../../media.css');

.bulk-upload-container {
    height: 100%;
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & .upload-and-instruction {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;

        & .upload-dropzone-and-rules {
            display: flex;
            margin-top: 32px;

            @media (--md-down) {
                flex-direction: column;
                align-items: center;
            }

            @media (--xs-down) {
                width: min-content;
            }

            & .upload-dropzone {
                border: 1px dashed var(--dark-grey);
                width: 670px;
                height: calc(30vh + 82px);
                min-height: 440px;
                max-height: 500px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                background: var(--grey);

                &.no-border {
                    border: none;
                }

                @media (--lg-only) {
                    width: 55vw;
                }

                @media (--md-down) {
                    width: 85vw;
                    height: 30vh;
                }

                & .upload-dropzone-instruction {
                    font-size: var(--font-size-lg);
                    font-family: var(--base-font-family);
                    color: var(--black);
                    font-weight: 600;

                    button.upload {
                        appearance: none;
                        background-color: transparent;
                        border: none;
                        font-size: inherit;
                        font-weight: inherit;
                        font-family: inherit;
                        color: var(--anchor-text-blue);

                        &:hover {
                            text-decoration: underline;
                            text-decoration-thickness: 2px;
                        }
                    }
                }

                & .upload-additional-information {
                    width: 500px;
                    text-align: center;
                    margin-block-start: 16px;
                    font-size: var(--font-size-sm);

                    a {
                        color: var(--anchor-text-blue);
                    }

                    @media (--xs-down) {
                        width: 300px;
                        font-size: var(--font-size-xs);
                    }
                }

                & .or-conjunction {
                    color: var(--warm-grey);
                }

                & .file-restrictions {
                    font-size: var(--font-size-sm);
                    font-style: italic;
                    text-align: center;
                }

                button {
                    background-color: var(--white);
                    color: var(--black);
                    min-width: 6rem;

                    @media (--md-down) {
                        width: auto;
                    }
                }

                & .uploading-container,
                .waiting-container {
                    width: 100%;
                    height: 100%;
                    background: var(--white);
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img.close-icon {
                        align-self: flex-end;
                        margin-right: 12px;
                        margin-top: 12px;
                        cursor: pointer;
                    }

                    & .file-name {
                        margin-bottom: 8px;
                    }

                    & .file-size {
                        font-weight: 400;
                        color: var(--warm-grey);
                        font-size: var(--font-size-xs);
                    }

                    @media (--md-down) {
                        padding: 8px;
                    }
                }

                & .uploading-container {
                    & .spinner {
                        @media (--md-down) {
                            padding: 0.5rem;
                        }
                    }

                    & .spinner__shape {
                        width: 5.5rem;
                        height: 5.5rem;
                    }

                    & .upload-progress-text {
                        font-size: var(--font-size-lg);
                        font-weight: 600;
                        margin-bottom: 16px;
                    }
                }

                & .waiting-container {
                    & .file-icon-container {
                        @media (--lg-up) {
                            padding: 2rem;
                        }

                        @media (--md-only) {
                            padding: 1rem;
                        }
                    }

                    & .labeled-checkbox {
                        font-size: var(--font-size-xs);
                        align-items: end;

                        @media (--sm-up) {
                            margin-bottom: 24px;
                        }

                        @media (--sm-down) {
                            padding: 12px;
                            align-items: center;
                        }

                        & .checkbox-container {
                            @media (--sm-down) {
                                align-self: baseline;
                            }
                        }

                        @media (--lg-up) {
                            margin-top: 36px;
                        }

                        a {
                            color: var(--blue);
                            text-decoration: underline;
                        }
                    }

                    & .submit {
                        button {
                            border: none;
                            color: var(--white);
                            border-radius: 50px;
                            width: 178px;
                            height: 57px;
                            background: var(--blue);
                            font-family: var(--base-font-family);
                            font-weight: 600;
                            text-transform: uppercase;
                        }

                        &.disabled {
                            & button {
                                cursor: default;
                                color: var(--warm-grey);
                                background: var(--desert-storm);
                            }
                        }
                    }
                }
            }

            & .expandable-container {
                width: 570px;

                @media (--md-down) {
                    width: 85vw;
                    margin-top: 40px;
                }

                summary {
                    svg {
                        margin-inline-end: 8px;
                    }
                }

                p.template-additional-information {
                    margin-block-start: 8px;
                }
            }
        }
    }
}
