:host{
    --menutabbar-size: 60px;

    ion-tabs {
        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
    }

    ion-tab-button ion-icon {
        text-overflow: unset;
        overflow: visible;
        text-align: center;
    }

    ion-tabs.placement-bottom ion-tab-button {
        ion-icon {
            transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
        }
        ion-badge {
            top: 8px;
        }
    }

    ion-tabs.placement-side {
        flex-direction: row;
        ion-tab-bar {
            order: -1;
            width: var(--menutabbar-size);
            height: 100%;
            flex-direction: column;
            ion-tab-button {
                display: contents;
                width: 100%;
                ion-badge {
                    top: calc(50% - 20px);
                }
            }
        }
    }

    .core-network-message {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        color: white;
        visibility: hidden;
        height: 0;
        transition: all 500ms ease-in-out;
        opacity: .8;
    }

    .core-online-message,
    .core-offline-message {
        display: none;
    }
}

:host-context(.core-online),
:host-context(.core-offline) {
    ion-tabs.placement-bottom ion-tab-button ion-icon {
        margin-bottom: 8px;
    }

    ion-tabs.placement-bottom ion-tab-button.ios ion-icon {
        margin-bottom: 14px;
    }

    .core-network-message {
        visibility: visible;
        height: 16px;
        pointer-events: none;
    }
}

:host-context(.core-offline) .core-offline-message,
:host-context(.core-online) .core-online-message {
    display: block;
}

:host-context(.core-online) .core-network-message {
    background: var(--green);
}

:host-context(.core-offline) .core-network-message {
    background: var(--red);
}
