@import '../../utils/colors.less';
@import '../../utils/fonts.less';

.chat-message.dh-chat-message {
    .message-content {
        padding: 0;
    }
}

.chat-message {
    .duality-modifiers,
    .duality-result,
    .dice-title {
        display: none;
    }

    .message-content {
        padding: 0 8px;
        font-family: @font-body;
        color: light-dark(@dark, @beige);

        blockquote {
            border-left: 5px solid light-dark(@dark-blue-40, @golden-40);
        }

        a[href] {
            color: light-dark(@dark-blue, @golden);
        }

        a[href]:hover,
        a[href].active {
            font-weight: bold;
            text-shadow: 0 0 8px light-dark(@dark-blue, @golden);
        }

        button {
            background: light-dark(transparent, @golden);
            border: 1px solid light-dark(@dark-blue, @dark-blue);
            color: light-dark(@dark-blue, @dark-blue);
            outline: none;
            box-shadow: none;

            &:hover {
                background: light-dark(@light-black, @dark-blue);
                color: light-dark(@dark-blue, @golden);
            }

            &.glow {
                animation: glow 0.75s infinite alternate;
            }

            &:disabled {
                background: light-dark(transparent, @golden);
                color: light-dark(@dark-blue, @dark-blue);
                opacity: 0.6;
                cursor: not-allowed;

                &:hover {
                    background: light-dark(transparent, @golden);
                    color: light-dark(@dark-blue, @dark-blue);
                }
            }

            &.reverted {
                background: light-dark(@dark-blue-10, @golden-10);
                color: light-dark(@dark-blue, @golden);
                border: 1px solid light-dark(@dark, transparent);
                &:hover {
                    background: light-dark(transparent, @golden);
                    color: light-dark(@dark-blue, @dark-blue);
                }
                img {
                    border-radius: 3px;
                }
            }
        }

        .enriched-effect {
            display: flex;
            align-items: center;
            border: 1px solid black;
            width: fit-content;
            padding: 0 2px 0 0;
            border-radius: 6px;
            color: @dark;
            background-image: url(../assets/parchments/dh-parchment-light.png);

            &:hover {
                text-shadow: none;
            }

            span {
                white-space: nowrap;
            }
        }

        .dice-roll .dice-formula,
        .dice-roll .dice-total {
            box-shadow: none;
            border: none;
            background: light-dark(@dark-blue-40, @golden-40);
            color: light-dark(@dark-blue, @golden);
            font-weight: 600;
            align-content: center;
        }

        .dice-roll .dice-formula {
            height: 27px;
        }

        .dice-roll .dice-total {
            height: 34px;
        }
    }
}

fieldset.daggerheart.chat {
    padding: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    legend {
        display: flex;
        align-items: center;
        gap: 5px;
        &:before,
        &:after {
            content: '\f0d8';
            font-family: 'Font Awesome 6 Pro';
        }
    }
    &.expanded {
        legend:before,
        legend:after {
            content: '\f0d7';
        }
    }
    .daggerheart.chat {
        margin-top: 5px;
    }
}