/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.reactionsRow {
    color: var(--cpd-color-text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cpd-space-1x);
}

.showAllButton {
    all: unset;
    color: var(--cpd-color-text-secondary);
    font-size: var(--cpd-font-size-body-xs);
    line-height: 20px;
    cursor: pointer;
}

.showAllButton:hover,
.showAllButton:focus-visible {
    color: var(--cpd-color-text-primary);
}

.addReactionButton {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: var(--cpd-space-1x);
    margin-inline: var(--cpd-space-1x);
    border-radius: var(--cpd-space-1x);
    color: var(--cpd-color-icon-secondary);
    visibility: hidden;
    cursor: pointer;
}

.reactionsRow:hover .addReactionButton {
    visibility: visible;
}

.addReactionButtonVisible {
    visibility: visible;
}

.addReactionButtonActive {
    visibility: visible;
}

.addReactionButtonDisabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.addReactionButton:hover,
.addReactionButton:focus-visible,
.addReactionButtonActive {
    color: var(--cpd-color-icon-primary);
}

.addReactionButton svg {
    width: 16px;
    height: 16px;
}