Модуль:Mbox/styles.css

.mbox {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 8px; /* Replaced --space-xs */
    margin-bottom: 16px; /* Replaced --space-md */
    background-color: #f0f0f0; /* Replaced --color-surface-2 */
    border-radius: 8px; /* Replaced --border-radius--medium */
    color: #666666; /* Replaced --color-base--subtle */
    font-size: 12px; /* Replaced --font-size-small */
    line-height: 16px; /* Replaced --line-height-xs */
}

.mbox.mbox-high {
    /* High importance message background */
    background-color: rgba(221, 51, 51, 0.1); /* Same as before */
}

.mbox.mbox-med {
    /* Medium importance message background */
    background-color: rgba(255, 204, 51, 0.1); /* Same as before */
}

.mbox-title {
    display: flex;
    align-items: center;
    padding: 12px 16px; /* Replaced --space-sm and --space-md */
}

.mbox-icon img {
    display: block;
    width: 12px; /* Replaced --font-size-small */
    height: auto;
    margin-right: 8px; /* Replaced --space-xs */
    opacity: 0.8; /* Replaced --opacity-icon-base */
    filter: invert(1); /* Replaced --filter-invert */
}

.mbox-text {
    position: absolute;
    top: 100%;
    z-index: 10;
    padding: 16px; /* Replaced --space-md */
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff; /* Replaced --color-surface-1 */
    border-bottom-left-radius: 8px; /* Replaced --border-radius--medium */
    border-bottom-right-radius: 8px; /* Replaced --border-radius--medium */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Replaced --box-shadow-dialog */
    opacity: 0;
    visibility: hidden;
}

.mbox:hover {
    /* Merge with popup */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Same as --box-shadow-dialog */
}

.mbox:hover .mbox-text {
    opacity: 1;
    visibility: visible;
}