/*--------------------------------------------------------------------------*\
    Comment message
\*--------------------------------------------------------------------------*/

.comment__message {
    /*box*/
    display: none;
    position: absolute;
    padding: 11px;
    min-height: 65px;
    z-index: 4;

    /*border*/
    border: 1.5px solid var(--c-tertiary-2);
    border-radius: 5px;

    /*background*/
    background-color: var(--c-tertiary-4);

    /*text*/
    white-space: normal;
    overflow-wrap: break-word;
    color: var(--c-primary-1);
    font-size: 12px;
    font-weight: var(--fw-thin);
    text-align: left !important;
    -webkit-user-select: none;
    user-select: none;
}

.comment__message::before {
    /*box*/
    position: absolute;
    height: 15px;
    width: 15px;

    /*background*/
    background-color: var(--c-tertiary-4);

    /*text*/
    content: '';

    /*transform*/
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.comment:hover>.comment__message {
    /*box*/
    display: block;
}

/*--------------------------------------------------------------------------*\
    Sizes
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
        Medium
\*--------------------------------------------------------------------------*/

.comment__message--md {
    /*box*/
    width: 230px;
}

/*--------------------------------------------------------------------------*\
        Large
\*--------------------------------------------------------------------------*/

.comment__message--lg {
    /*box*/
    width: 330px;
}