@use "theme/globals" as *;

:host {
    ion-tabs {
        --menutabbar-size: var(--bottom-tabs-size);
    }

    ion-tabs.placement-side {
        --menutabbar-size: var(--side-tabs-size);
    }

    --network-margin-bottom: 0px;
    --network-message-background: transparent;
    --network-message-offline: none;
    --network-message-online: none;
    --network-message-height: 16px;
}

:host-context(.core-online),
:host-context(.core-offline) {
    .core-network-message {
        visibility: visible;
        height: var(--network-message-height);
        line-height: var(--network-message-height);
        padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
    }
}

:host-context(.core-online) {
    --network-margin-bottom: 8px;

    --network-message-background: var(--success);
    --network-message-online: block;
}

:host-context(.core-offline) {
    --network-margin-bottom: 8px;

    --network-message-background: var(--danger);
    --network-message-offline: block;
}

ion-tab-bar {
    --background: var(--core-bottom-tabs-background);
    --color: var(--core-bottom-tabs-color);
    --color-selected: var(--core-bottom-tabs-color-selected);
    --background-selected: var(--core-bottom-tabs-background-selected);

    height: var(--menutabbar-size);
}

core-user-menu-button {
    align-items: center;
    display: flex;
    justify-content: center;
}

ion-tab-button {
    &.tab-selected {
        background: var(--background-selected);
    }

    ion-icon.core-tab-icon {
        text-overflow: unset;
        overflow: visible;
        text-align: center;
        font-size: var(--mdl-typography-icon-fontSize-lg);
    }

    ion-badge.core-tab-badge {
        font-size: 12px;
        font-weight: bold;
        border-radius: 10px;
        padding-left: 6px;
        padding-right: 6px;
        line-height: 14px;
        --background: var(--core-bottom-tabs-badge-color);
        --color: var(--core-bottom-tabs-badge-text-color);
    }

    ion-icon.core-tab-badge {
        color: var(--core-bottom-tabs-badge-color);
        padding: 3px 6px 2px;
        @include position(8px, null, null, calc(50% + 6px));
        min-width: 12px;
        font-size: 8px;
        font-weight: normal;
        box-sizing: border-box;
        position: absolute;
        z-index: 1;
    }
}

ion-tabs.placement-bottom {
    ion-tab-button {
        ion-icon.core-tab-icon {
            margin-bottom: var(--network-margin-bottom);
            transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
        }

        ion-icon.core-tab-badge,
        ion-badge.core-tab-badge {
            top: 8px;
        }
    }

    @if ($core-always-show-main-menu) {
        ion-tab-bar {
            height: var(--menutabbar-size) !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
    } @else {
        &.tabshidden ion-tab-bar {
            pointer-events: none;

            ion-tab-button {
                height: auto;
            }
        }
    }
}

ion-tabs.placement-side {
    flex-direction: row;

    ion-tab-bar {
        order: -1;
        width: var(--menutabbar-size);
        height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
        flex-direction: column;
        @include border-end(var(--border));
        border-top: 0;
        justify-content: flex-start;

        @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));

        ion-tab-button {
            --padding-start: 0;
            --padding-end: 0;
            ion-badge.core-tab-badge {
                @include position(null, 1px, null, auto);
            }
        }


        ion-tab-button, core-user-menu-button {
            width: 100%;
            min-height: var(--menutabbar-size);
            flex: 0;

            ion-icon.core-tab-badge,
            ion-badge.core-tab-badge {
                top: calc(50% - 20px);
            }
        }
    }
}

.core-network-message {
    background: var(--network-message-background);
    pointer-events: none;
    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;
    z-index: 12;
    font-size: 12px;

    .core-online-message {
        display: var(--network-message-online);
    }

    .core-offline-message {
        display: var(--network-message-offline);
    }
}
