@import "~scss/variables";
@import "~scss/mixins";

$sw-duplicated-media-v2-separator-color: $color-gray-300;
$sw-duplicated-media-v2-font-size-preview: $font-size-xs;

.sw-duplicated-media-v2 {
    .sw-duplicated-media-v2__description {
        font-size: $font-size-xs;
        margin-bottom: 10px;
    }

    .sw-duplicated-media-v2__preview {
        margin-bottom: 35px;
    }

    .sw-media-base-item {
        margin-bottom: 0;
    }

    .sw-duplicated-media-v2__preview-separator {
        justify-self: center;
        color: $sw-duplicated-media-v2-separator-color;
    }

    .sw-duplicated-media-v2__options {
        font-size: $font-size-xs;
        margin-bottom: 0;
    }

    .sw-field--checkbox {
        margin-bottom: 0;
    }

    .sw-modal__footer {
        grid-auto-columns: max-content;
    }

    .sw-duplicated-media-v2__additional-error-count {
        width: max-content;
    }

    .sw-duplicated-media-v2__target-upload {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: 10px;
        border: 1px solid $color-gray-300;
        border-radius: 4px;
        padding: 8px;
    }

    .sw-duplicated-media-v2__target-preview {
        position: relative;
        width: 40px;
        height: 40px;
        grid-row: 1 / span 2;
        overflow: hidden;

        .sw-media-preview-v2__item {
            min-width: 100%;
            max-width: none;
            max-height: 100%;
        }
    }

    .sw-duplicated-media-v2__target-label {
        @include truncate;

        font-size: $sw-duplicated-media-v2-font-size-preview;
    }

    .sw-duplicated-media-v2__target-details {
        font-size: $font-size-xs;
        color: $color-gray-300;
    }
}
