@use '~flux/components/css/mixin';

.comment {
    display: grid;
    max-width: 100%;
    gap: 3px 15px;
    grid-template-columns: 1fr auto;
    grid-template-rows: repeat(2, auto);

    :local(.avatar) {
        align-self: end;
        grid-column: 2;
        grid-row: 1;
    }

    .commentContent {
        grid-column: 1;
        grid-row: 1;
    }

    .commentFooter {
        grid-column: 1;
        grid-row: 2;
    }

    &.isReceived {
        grid-template-columns: auto 1fr;

        :local(.avatar) {
            grid-column: 1;
        }

        .commentContent {
            grid-column: 2;
        }

        .commentFooter {
            grid-column: 2;
        }
    }
}

.commentContent {
    min-width: 0;
    padding: 12px 18px;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: calc(var(--radius) * 2);
    box-shadow: var(--shadow-xs);
}

.comment:not(.isReceived) .commentContent {
    border-bottom-right-radius: var(--radius);
}

.comment.isReceived .commentContent {
    background: var(--gray-50);
    border-color: var(--gray-200);
    border-bottom-left-radius: var(--radius);
}

.comment.isTyping .commentContent {
    width: min-content;
}

.commentTyping {
    display: block;
    margin: 6px;
    height: 6px;
    width: 6px;
    border-radius: 6px;
    animation: commentTyping 1s linear infinite both;
}

.commentFooter {
    @include mixin.text(2xsmall);

    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    font-weight: 500;

    :global(span) {
        margin-right: auto;
    }

    :global(time) {
        color: var(--foreground-secondary);
    }
}

@keyframes commentTyping {
    0%,
    80%,
    100% {
        background: var(--gray-200);
        box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
        translate: 0 0;
    }

    20% {
        background: var(--gray-200);
        box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
        translate: 0 0;
    }

    40% {
        background: var(--gray-300);
        box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
        translate: 0 -4px;
    }

    60% {
        background: var(--gray-200);
        box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
        translate: 0 0;
    }
}