@use "variables" as *;

:host {
    display: block;
    width: 100%;
    height: 100%;
}

dot-contentlet-thumbnail::ng-deep {
    .background-image:not(.svg-thumbnail) {
        img {
            object-fit: cover;
        }
    }

    img {
        object-fit: contain;
    }
}

.preview-container {
    display: flex;
    gap: $spacing-1;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: preview;

    &:only-child {
        gap: 0; // Remove gap if only one preview
    }
}

.preview-code_container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    user-select: none;
    cursor: pointer;
}

.preview-image__container,
dot-contentlet-thumbnail {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $color-palette-gray-200;
}

.preview-container--fade::after {
    content: "";
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    border-radius: $border-radius-md;
    pointer-events: none;
}

.preview-metadata__container {
    flex-grow: 1;
    padding: $spacing-1;
    padding-right: $spacing-6;
    display: none;
    flex-direction: column;
    overflow: hidden;
    gap: $spacing-2;
    min-width: 150px;

    span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .preview-metadata_header {
        font-size: $font-size-md;
        font-weight: $font-weight-semi-bold;
        margin: 0;
        color: $black;
    }
}

.preview-metadata {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: $spacing-0;
}

.preview-resource-links__actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: $spacing-0;
    padding-top: $spacing-1;
}

.preview-metadata__actions {
    position: absolute;
    bottom: $spacing-1;
    right: 0;
    display: none;
    justify-content: flex-end;
    align-items: center;
    gap: $spacing-1;
    z-index: 100;
}

.preview-metadata__action--responsive {
    position: absolute;
    bottom: $spacing-1;
    right: $spacing-1;
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
    z-index: 100;
}

code {
    background: $white;
    color: $color-palette-primary-500;
    height: 100%;
    width: 100%;
    white-space: pre-wrap;
    overflow: hidden;
    line-height: normal;
}

.file-info__item {
    display: flex;
    padding: $spacing-0 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: $spacing-0;

    &:not(:last-child)::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: $color-palette-gray-200;
        margin: $spacing-1 0;
    }
}

.file-info__link {
    display: flex;
    align-items: center;
    gap: $spacing-1;
    min-height: 32px;
    font-size: $font-size-sm;
    width: 100%;

    a {
        color: $black;
        text-decoration: none;
        flex: 1 0 0;
    }
}

.file-info__title {
    font-size: $font-size-sm;
    font-style: normal;
    font-weight: 600;
}

.file-info__size {
    display: flex;
    align-items: center;
    gap: $spacing-0;
}

@container preview (min-width: 500px) {
    .preview-metadata__container,
    .preview-metadata__actions {
        display: flex;
    }

    .preview-metadata__action--responsive {
        display: none;
    }

    .preview-image__container {
        height: 100%;
        max-width: 17.5rem;
    }

    .preview-resource-links__actions {
        display: flex;
    }

    .preview-overlay__container {
        display: none;
    }
}
