.UploadedFile {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--body-bg); // Using Flarum's body background color
    border-radius: var(--border-radius); // Using Flarum's border radius
    box-shadow: 0 2px 4px var(--shadow-color); // Using Flarum's shadow color
    padding: 15px;
    margin-bottom: 16px; // Consistent with the grid gap
}

.UploadedFile--preview img,
.UploadedFile--preview .icon-fallback {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
}

.UploadedFile--actions {
    margin-top: 10px;
    .Button {
        margin: 0 4px;
        background-color: var(--control-bg); // Control background for buttons
        color: var(--control-color); // Control text color for buttons
        border: none;

        &:hover,
        &:focus {
            background-color: var(--control-bg-darken-10); // Darken on hover/focus
        }
    }
}


[data-theme^=light] {
  --control-bg-darken-10: darken(@control-bg-light, 10%);
}
[data-theme^=dark] {
  --control-bg-darken-10: darken(@control-bg-dark, 10%);
}