/*------------------------------------*\
    FILE DOWNLOAD
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

/// Background colour for component
/// @type Color
$file-download-background-colour: settings.$ds_colour__background--secondary !default;

.ds_file-download {
    background-color: $file-download-background-colour;
    display: flex;
    @include helpers.ds_responsive-margin(4, bottom);
    @include helpers.ds_responsive-margin(4, top);
    @include helpers.ds_responsive-padding(2);

    @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, $file-download-background-colour, 'file download');

    &--highlighted {
        border-left: 0.25rem solid settings.$ds_colour__brand;
        @include helpers.ds_responsive-padding(2, left, $tuning: -0.25rem);
    }

    &__thumbnail {
        @include helpers.ds_responsive-margin(2, right);
    }

    &__thumbnail-image {
        display: block;

        &--outlined {
            outline: 0.0625rem solid settings.$ds_colour__border;
            outline-offset: -0.0625rem;    
        }
    }

    &__thumbnail-link {
        display: block;
        width: 4rem;
    }

    &__content {
        flex-grow: 1;
    }

    &__title {
        display: inline-block;
        font-weight: settings.$bold;
        @include helpers.ds_responsive-margin(1, bottom);
    }

    .ds_metadata {
        line-height: 1.5rem;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_file-download {

        &__thumbnail-link {
            width: 5rem;
        }
    }
}