/*------------------------------------------------------------------
[7.2 - Files]
*/
.upload-methods {
    a {
        color: var(--color-3);
        font-weight: 600;

        &.active {
            color: var(--color-1) !important;
        }
    }
}

.link-area {
    border-radius: 1rem;
    border: 2px dashed var(--color-1);
    color: var(--color-3);

    #file-url {
        resize: none;
    }
}

@media (min-width: $breakpoint-small) {
    .mobile-options {
        display: none;
    }
    
    .advanced-options {
        display: none;
        border-radius: 1rem;
        max-height: 0;
        transition: max-height 1s ease-out;
        overflow: hidden;

        &.show {
            display: inline-flex;
            max-height: 500px;
            transition: max-height 1s ease-in;
        }

        .btn {
            background: var(--color-4);
            color: var(--color-3);
            border-color: var(--color-4);
            border-radius: 1rem;

            &:hover i {
                color: var(--color-1);
            }
        }
    }
}

@media (max-width: $breakpoint-sm) {
    .advanced-options {
        display: none;
    }
    
    .mobile-options {
        display: none;
        max-height: 0;
        transition: max-height 1s ease-out;
        overflow: hidden;

        &.show {
            display: inline-flex;
            max-height: 500px;
            transition: max-height 1s ease-in;
        }
    }
}

.files-overview-card {
    .card {
        border: 2px dashed var(--color-1);

        @media (max-width: $breakpoint-sm) {
            .count {
                font-size: 1.125rem;
                line-height: 1.5;
            }
        }
    }
}

#files-table-search,
#reports-table-search {
    .input-group {
        @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-xxl) {
            input, select {
                border-radius: 1rem;
                width: 40%;
                margin-right: .25rem;
                margin-left: .25rem;
            }

            input[name=filename] {
                width: 100%;
            }

            button {
                border-radius: 1rem;
                width: 48.65%;
                margin-right: .25rem;
                margin-left: .25rem;
            }
        }

        @media (max-width: $breakpoint-md) {
            input, select, button {
                border-radius: 1rem;
                width: 100%;
                margin: 0;
            }
        }
    }
}

.uploaded-file {
    max-height: 500px;
}

.file-preview-inner {
    background: var(--color-4);
    border-radius: 1rem;

    @media (min-width: $breakpoint-medium) {
        height: 450px;
    }

    @media (max-width: $breakpoint-md) {
        height: 350px;
    }

    p {
        font-size: 3.5rem;
        font-weight: 900;
        color: rgba(var(--color-1-rgb),.2);
    }
}

@media (max-width: $breakpoint-md) {
    #view-modal-inner iframe {
        height: 350px;
    }
}
