/* INFO BLOCK - caja de información reutilizable estilo "callout" */

.slim-info-block {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid var(--slim-standard-button);
    font-size: 0.9em;
    line-height: 1.45;
}

/* display separado del resto de reglas y sin aplicar cuando el elemento
   lleva el atributo [hidden]: si no, esta clase (misma especificidad que la
   regla [hidden] del user-agent) gana el empate y el bloque nunca llega a
   ocultarse aunque el atributo esté puesto. */
.slim-info-block:not([hidden]) {
    display: flex;
    align-items: center;
}

.slim-info-block-icon {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1.45;
}

.slim-info-block-text {
    color: var(--slim-standard-button);
}

.slim-info-block-text a {
    color: inherit;
    text-decoration: underline;
}

.slim-info-block-info {
    background-color: var(--chip-bg);
    border-left-color: var(--slim-standard-button);
}

.slim-info-block-info .slim-info-block-icon {
    color: var(--slim-standard-button);
}

.slim-info-block-warning {
    background-color: var(--chip-manual-bg);
    border-left-color: var(--chip-manual-text);
}

.slim-info-block-warning .slim-info-block-icon {
    color: var(--chip-manual-text);
}

.slim-info-block-warning .slim-info-block-text {
    color: var(--chip-manual-text);
}

.slim-info-block-success {
    background-color: var(--chip-member-bg);
    border-left-color: var(--chip-member-text);
}

.slim-info-block-success .slim-info-block-icon {
    color: var(--chip-member-text);
}

.slim-info-block-danger {
    background-color: rgb(252 231 231);
    border-left-color: var(--slim-alert-button);
}

.slim-info-block-danger .slim-info-block-text {
    color: var(--slim-alert-button);
}

.slim-info-block-danger .slim-info-block-icon {
    color: var(--slim-alert-button);
}