// traduct boostrap file browser
.custom-file-input:lang(en) ~ .custom-file-label::after,
.custom-file-input:lang(fr) ~ .custom-file-label::after {
    background-color: #3444bf;
    color: #fff;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse";
}

.custom-file-input:lang(fr) ~ .custom-file-label::after {
    content: "Parcourir";
}

.aa-file,
.aa-image,
.media-link-wrap {
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    padding: 10px 10px;
    position: relative;

    &:hover {
        border-color: #234190;
    }

    .custom-file-input {
        cursor: pointer;
        position: absolute;
        height: 100%;
    }

    svg.icon {
        width: 28px;
        height: 28px;
        padding: 3px;
        fill: #234190;
    }

    .delete-wrap {
        display: inline-block;
        position: absolute;
        bottom: 1px;
        right: 10px;
    }
}

.aa-image, .media-link-wrap {
    .preview {
        position: relative;
        background: repeating-linear-gradient(-45deg, #eaecf4, #eaecf4 10px, #d0d2e2 10px, #d0d2e2 20px);
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        border: 1px solid #d0d2e2;
        display: flex;
        flex-direction: column;
        height: 270px;
        overflow: hidden;

        a {
            display: block;
        }

        .preview-wrap {
            text-align: center;
            height: 100%;
            width: 100%;
            object-fit: contain;

            img, .no-media-icon {
                object-fit: contain;
                height: auto;
                width: auto;
                max-width: calc(100% - 10px);
                max-height: calc(100% - 10px);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            img {
                display: inline-block;
            }

            .no-media-icon {
                display: none;

                svg {
                    width: 120px;
                    fill: rgba(34, 66, 145, .5);
                }
            }
        }

        &.missing-media {
            .img {
                display: none;
            }

            .no-media-icon {
                display: inline-block;
            }
        }

        .media-link {
            position: absolute;
            right: 0;
            bottom: 0;
            max-width: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-align: right;
            transition: max-width .3s, background-color .3s;
            border-top-left-radius: 7px;
            padding-right: 10px;

            &:hover, &:active {
                max-width: calc(100%);
                background: #fff;
                cursor: pointer;
            }
        }

        .unlinked-info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: $adminRed;
            font-size: 30px;
        }
    }
}

.media-link-wrap {
    .preview-outer {
        cursor: pointer;
    }

    .media-link-actions {
        display: flex;
        flex-direction: column;
        max-width: 240px;
        gap: 10px;
        align-items: baseline;
    }
}

/* tweak custom file input to be able to display multiline labels when selecting several files in multiple mode */
.custom-file {
    display: block;
    height: auto;
    cursor: pointer;

    .custom-file-input {
        position: absolute;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }

    .custom-file-label {
        position: relative;
        display: block;
        padding-right: 110px;
        height: auto;
        min-height: calc(1.5em + .75rem + 2px); // keep bootstrap height for minimal val
        margin: 0;
    }

    .custom-file-input ~ .custom-file-label:after {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 100%;
    }
}
