@import "../../style/typography.pcss";


[data-monster-role=control] {
    [data-monster-role=button] {
        width: 100%;
        min-width: max-content  ;
    }
}

button {
    width: max-content;
}

[data-monster-role=popper] {
    max-width: 100%;
}

[part=content] {
    display: block;
    min-width: 0;
}

[data-monster-role=message] {
    display: block;
    min-width: 0;
}

[data-monster-role=message][data-monster-message-layout=prose] {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;

    & > * {
        max-width: 100%;
        min-width: 0;
    }
}

[data-monster-role=message][data-monster-message-layout=wide] {
    width: max-content;
    max-width: none;

    & > * {
        min-width: 0;
    }
}

[data-monster-role=message][data-monster-message-layout=overlay] {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;

    & > * {
        max-width: 100%;
        min-width: 0;
    }

    & input,
    & select,
    & textarea {
        max-width: 100%;
        min-width: 0;
    }

    & monster-select,
    & monster-details,
    & monster-popper,
    & monster-popper-button,
    & monster-message-state-button {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}