@import '../../../../../styles/variables';

.bcs-ActivityMessage {
    white-space: pre-wrap;

    .link {
        color: $bdl-box-blue;
        white-space: normal;

        &:hover {
            text-decoration: underline;
        }
    }
}

.bcs-ActivityMessage-timestamp {
    display: inline-block;

    button {
        color: var(--box-blue-110, #0057c0);
        font-size: $bdl-fontSize--dejaBlue;
        line-height: $bdl-line-height;
        border-radius: $bdl-border-radius-size;
        background-color: $bdl-box-blue-10;
        padding: 4px;
        display: inline-block;
        border: none;

        &:hover {
            background-color: $bdl-box-blue-10;
            border: none;
            cursor: pointer;
        }
    }
}

.bcs-ActivityMessage-edited {
    color: $bdl-gray-65;
}

.bcs-ActivityMessage-mention {
    overflow: initial;
    white-space: normal;
}

.bcs-ActivityMessage-collapsed {
    /* webkit-line-clamp only works in combination with -webkit-box */
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.bcs-ActivityMessage-translate,
.bcs-ActivityMessage-toggleMoreLess {
    &.btn-plain {
        display: block;
        margin-left: -2px;
        color: $bdl-box-blue;
        font-weight: bold;

        // to align with rest of text despite invisible border
        line-height: $bdl-line-height - 4px;
        border: 2px solid transparent;
        border-radius: 2px;

        &:hover,
        &:active {
            text-decoration: underline;
        }

        &:active {
            color: $bdl-light-blue;
        }

        &:focus-visible {
            border-color: $bdl-box-blue;
        }
    }
}

.bcs-ActivityMessageLoading {
    margin-top: 3px;
}