@use "variables" as *;

$max-galleria-dimension: 28.75rem;

:host {
    display: flex;
    flex-direction: column;
}

.ai-image-gallery__placeholder {
    background-color: $color-palette-gray-200;
    width: calc(100% - 3rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: $border-radius-md;
    align-self: center;

    &.s1024x1792 {
        aspect-ratio: 1/1.25;
    }

    &.s1792x1024 {
        aspect-ratio: 1/0.5;
    }

    &.s1024x1024 {
        aspect-ratio: 1/1;
    }
}

p-galleria {
    height: 34rem;
    display: flex;
    align-items: center;
    padding: $spacing-3;
    border-radius: $border-radius-md;
    background-color: $color-palette-gray-100;
}

.ai-image-gallery__count {
    margin-top: $spacing-1;
}

:host ::ng-deep {
    .ai-image-gallery__img {
        width: 100%;
        max-height: 32rem;
        border-radius: $border-radius-md;
    }

    p-galleriacontent {
        width: 100%;
    }

    dot-empty-container .message__icon {
        color: $red;
    }

    .message__principal-wrapper {
        padding: 0 4.5rem;
    }

    .p-image-preview {
        max-width: 100%;
        max-height: 48rem;
    }

    .p-image-toolbar button:not(:last-child) {
        display: none;
    }
}

.ai-image-gallery_skeleton {
    width: 100%;
    height: $max-galleria-dimension;
    display: flex;
}

.ai-image-gallery__count-skeleton {
    margin-top: $spacing-1;
    align-self: center;
}
