:host {
    display: flex;
    --tw-bg-opacity: 1;
    background-color: rgba(var(--dyte-colors-background-800, 30 30 30) / var(--tw-bg-opacity));
    border-top-left-radius: var(--dyte-border-radius-md, 8px);
    border-top-right-radius: var(--dyte-border-radius-md, 8px)
}
.preview-overlay {
    position: absolute;
    top: var(--dyte-space-0, 0px);
    right: var(--dyte-space-0, 0px);
    bottom: var(--dyte-space-0, 0px);
    left: var(--dyte-space-0, 0px);
    background-color: inherit
}

.preview {
    position: absolute;
    top: var(--dyte-space-4, 16px);
    left: var(--dyte-space-4, 16px);
    max-width: -moz-fit-content;
    max-width: fit-content;
    max-height: var(--dyte-space-20, 80px)
}

.preview:hover dyte-tooltip {
    display: block
}

.preview dyte-tooltip {
    position: absolute;
    top: calc(var(--dyte-space-1, 4px) * -1);
    left: calc(var(--dyte-space-1, 4px) * -1);
    display: none;
    margin-left: calc(var(--dyte-space-1, 4px) * -1);
    margin-top: calc(var(--dyte-space-1, 4px) * -1)
}

.preview dyte-button {
    display: flex;
    height: var(--dyte-space-4, 16px);
    width: var(--dyte-space-4, 16px);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
    border: 1px solid rgb(var(--dyte-colors-text-1000, 255 255 255))
}

.preview dyte-icon {
    height: var(--dyte-space-3, 12px);
    width: var(--dyte-space-3, 12px);
    color: rgb(var(--dyte-colors-text-1000, 255 255 255))
}

.preview-image {
    height: var(--dyte-space-16, 64px);
    width: var(--dyte-space-16, 64px);
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 100%;
    max-width: 100%;
    overflow: clip;
    border-radius: var(--dyte-border-radius-md, 8px)
}

.preview-file {
    padding-left: var(--dyte-space-3, 12px);
    padding-right: var(--dyte-space-3, 12px);
    padding-top: var(--dyte-space-2, 8px);
    padding-bottom: var(--dyte-space-2, 8px);
    --tw-bg-opacity: 1;
    background-color: rgba(var(--dyte-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
    color: rgb(var(--dyte-colors-text-900, 255 255 255 / 0.88));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--dyte-border-radius-md, 8px);
  max-width: 200px
}