@use "variables" as *;

:host {
    width: 100%;
    height: 100%;
    max-height: 400px;
    overflow: auto;
    display: block;
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
}

.card {
    width: 100%;
    max-height: 80px;
    box-sizing: border-box;
    display: flex;
    gap: $spacing-3;
    padding: 0.5 * $dot-editor-size;
    background-color: $white;
    cursor: pointer;
}

.image {
    min-width: 64px;
    min-height: 64px;
    background: $black;
}

.body {
    display: block;
    width: 100%;
    height: 100%;

    .data-wrapper {
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title,
        .subtitle {
            width: 80%;
            overflow: hidden;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 0.25 * $dot-editor-size;
            background-color: $black;
            height: 0.75 * $dot-editor-size;
            border-radius: 0.3125 * $dot-editor-size;
            margin-bottom: 0.625 * $dot-editor-size;
        }

        .subtitle {
            width: 85%;
            height: 0.625 * $dot-editor-size;
        }

        .state {
            margin-top: $spacing-1;
            display: flex;
            align-items: center;

            .circle {
                width: $dot-editor-size;
                height: $dot-editor-size;
                background: #000;
                border-radius: 100%;
                margin-right: $spacing-1;
            }

            .meta {
                width: 1.875 * $dot-editor-size;
                height: 10px;
                background: #000;
                border-radius: 0.25 * $dot-editor-size;
            }
        }
    }
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(0, 0%, 80%);
    }

    100% {
        background-color: hsl(0, 0%, 95%);
    }
}
