/* The file upload widgets: FileChunkedUpload, FileInput and the upload row of
 * PDFViewerWidget.
 *
 * The file input itself stays invisible (`opacity: 0`, as it always was): that
 * is what makes the whole area both a click target and a drop target, with the
 * browser's own file dialog behind it. What was missing is anything drawn
 * underneath, so the empty widget rendered as a blank white box -- no label, no
 * button, nothing to suggest it could be clicked at all. `.gt-upload-hint` is
 * that surface, and it sits behind the input rather than replacing it, so no
 * javascript needed to change.
 *
 * Everything is a custom property, so a project restyles the widget without
 * touching this file:
 *
 *     .my-form { --gt-upload-accent: #2a6fb5; }
 */

.fileupload,
.pdfviewer-widget {
    --gt-upload-accent: #26b99a;
    --gt-upload-border: #ced4da;
    --gt-upload-ink: #6b7d80;
    --gt-upload-surface: #fff;
    --gt-upload-hover: #f4faf8;
    /* Written by the widget as the upload advances. */
    --gt-upload-progress: 0%;
}

/* -- the drop surface ---------------------------------------------------- */

.uploadfilecontent {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--gt-upload-surface);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.gt-upload-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    color: var(--gt-upload-ink);
    font-size: .9rem;
    line-height: 1.2;
    /* Purely a backdrop: every pointer event belongs to the input above it. */
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gt-upload-hint strong {
    color: var(--gt-upload-accent);
    font-weight: 600;
}

.gt-upload-hint .gt-upload-hint-long {
    color: var(--gt-upload-ink);
}

/* The container reacts, because the input on top of it is transparent. */
.uploadfilecontent:hover,
.uploadfilecontent:focus-within {
    background: var(--gt-upload-hover);
}

.uploadfilecontent:focus-within {
    box-shadow: inset 0 0 0 2px
        color-mix(in srgb, var(--gt-upload-accent) 45%, transparent);
}

/* Narrow fields cannot fit the second half of the sentence. */
@media (max-width: 575.98px) {
    .gt-upload-hint .gt-upload-hint-long {
        display: none;
    }
}

/* The chunked input has been transparent for years, in the theme stylesheets;
 * the PDF one never was, so its native "Choose file" button sat on top of the
 * hint. Same treatment, declared with the widget rather than with the theme. */
.pdfviewer-widget .pdfupload-input {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    opacity: 0;
}

/* -- the two icon actions ------------------------------------------------ */

/* The download used to be `bg-danger`: a red button, in a palette where red is
 * how deletion is spelled everywhere else, for the one control that only ever
 * reads a file. Both actions are neutral now and tell the difference through
 * their icon and their tooltip, not their colour.
 */
.fileupload .fileshow,
.pdfviewer-widget .pdfviewer-toggle,
.fileupload [id^="download_"],
.pdfviewer-widget [id^="download_"] {
    cursor: pointer;
    color: var(--gt-upload-ink);
    transition: color .15s ease, background-color .15s ease;
}

.fileupload .fileshow:hover,
.pdfviewer-widget .pdfviewer-toggle:hover,
.fileupload [id^="download_"]:hover,
.pdfviewer-widget [id^="download_"]:hover {
    color: var(--gt-upload-accent);
    background-color: var(--gt-upload-hover);
}

.fileupload [id^="download_"] a,
.pdfviewer-widget [id^="download_"] a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.fileupload .fileshow:focus-visible,
.pdfviewer-widget .pdfviewer-toggle:focus-visible,
.fileupload [id^="download_"] a:focus-visible,
.pdfviewer-widget [id^="download_"] a:focus-visible {
    outline: 2px solid var(--gt-upload-accent);
    outline-offset: -2px;
}

/* -- the status chip and the progress bar -------------------------------- */

/* The chip shows the file icon, then the percentage, then a tick. It is 3ch
 * wide at rest and would jump when "100%" lands in it.
 */
.fileupload [class$="_progress"],
.pdfviewer-widget [class$="_progress"] {
    min-width: 3.6rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
}

.fileupload [class$="_progress"] .fa-check,
.pdfviewer-widget [class$="_progress"] .fa-check {
    color: var(--gt-upload-accent);
}

/* A percentage in a 30px box was the only sign an upload was running. */
.gt-upload-progress {
    height: 3px;
    margin-top: -1px;
    border-radius: 0 0 var(--bs-border-radius, .375rem)
                   var(--bs-border-radius, .375rem);
    background: transparent;
    overflow: hidden;
}

.gt-upload-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--gt-upload-progress);
    background: var(--gt-upload-accent);
    transition: width .2s ease-out;
}

/* Nothing to show before it starts or once it is done and the tick is up. */
.fileupload:not(.gt-uploading) .gt-upload-progress::after,
.pdfviewer-widget:not(.gt-uploading) .gt-upload-progress::after {
    width: 0;
}

/* -- the name of the file once there is one ------------------------------ */

.fileupload [class$="_messages"],
.pdfviewer-widget [class$="_messages"] {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* -- delete ------------------------------------------------------------- */

.gt-upload-remove {
    margin-top: .4rem;
}

.gt-upload-remove label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--gt-upload-ink);
    cursor: pointer;
}

.gt-upload-remove label:hover {
    color: var(--bs-danger, #d9534f);
}

/* Deleting is the destructive action here, so it is the one that turns red --
 * and only once it is actually armed. */
.gt-upload-remove input:checked ~ .gt-upload-remove-text {
    color: var(--bs-danger, #d9534f);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .uploadfilecontent,
    .fileupload .fileshow,
    .fileupload [id^="download_"],
    .gt-upload-progress::after {
        transition: none;
    }
}