/* Use the supplied Interstel assets without modifying Roundcube's skin. */
html #logo {
    opacity: 1;
    object-fit: contain;
}

html .task-login #logo {
    width: 300px;
    height: 84px;
    max-width: calc(100vw - 40px);
    max-height: 84px;
    object-fit: cover;
}

/* Roundcube chooses the symbol variant for its phone layout. */
html.layout-phone .task-login #logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

html #layout-menu .popover-header #logo {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0;
    object-fit: contain;
}

/* Elastic's desktop/tablet task menu stays dark in its light theme. */
html:not(.layout-phone) #layout-menu .popover-header #logo,
html.dark-mode #logo {
    filter: brightness(0) invert(1);
    opacity: 1;
}