@import "../../style/control.pcss";
@import "../../style/display.pcss";
@import "../../style/border.pcss";
@import "../../style/control.pcss";
@import "../../style/mixin/media.pcss";
@import "../../style/mixin/typography.pcss";
@import "../../style/mixin/button.pcss";
@import "../../style/mixin/hover.pcss";

[data-monster-role=entries] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;

    & ul {
        list-style-type: none;
        margin: 0;
        padding: 0 0 0 1.8rem; /* Abstand links behalten */
        width: 100%; /* Flex-Container-Anpassung */
    }

    & ul:before {
        content: "";
        display: block;
        width: 2px;
        height: 100%;

        border-left-color: var(--monster-bg-color-primary-3);
        border-left-style: dotted;
        border-left-width: 1px;
        position: absolute;
        left: 1rem;
        bottom: 0;
        top: 0;
    }

    & ul li {
        margin: 0;
        padding: 0.35rem 0.3rem;
        color: var(--monster-color-primary-1);
        background-color: var(--monster-bg-color-primary-1);

        position: relative;


        & .message {

        }

        & .title {
            font-stretch: expanded;
            font-weight: bolder;
        }

        & .title:before {
            content: "—";
            font-weight: normal;
            margin-right: 0.3rem;
        }

    }

    & ul li:before {
        content: "";
        width: 6px;
        height: 6px;
        box-sizing: border-box;
        border-radius: 50%;
        background: var(--monster-bg-color-primary-3);
        border: 1px solid var(--monster-color-primary-2);
        position: absolute;
        left: calc(-1rem + (5px / 4));
        top: 0.85rem;
    }
}