@import "~theme/globals";

:host {
    --tabs-background: var(--core-tabs-background);
    --tabs-color: var(--core-tab-color);
    --height: var(--core-tabs-height);
    height: 100%;
    display: flex;
    flex-direction: column;

    ion-tabs {
        background: transparent;
        position: relative;
    }

    ion-tab-bar.core-tabs-bar {
        position: relative;
        background: var(--tabs-background);
        @include safe-area-padding-end(null, 0px);
        height: var(--height);
        color: var(--tabs-color);
        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
        border: 0;
        display: flex;
        align-items: flex-end;

        ion-row {
            width: 100%;
        }

        .tab-slide {
            border-bottom: 2px solid transparent;
            min-width: 100px;
            min-height: var(--height);
            cursor: pointer;
            overflow: hidden;

            ion-tab-button {
                max-width: 100%;
                ion-label {
                    font-size: 16px;
                    font-weight: 400;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    word-wrap: break-word;
                    max-width: 100%;
                    line-height: 1.2em;
                    margin-top: 16px;
                    margin-bottom: 16px;
                }
            }

            &[aria-selected=true],
            &.selected {
                color: var(--color-active);
                border-bottom-color: var(--border-color-active);
                ion-tab-button {
                    color: var(--color-active);
                    ion-label {
                        font-weight: var(--font-weight-active);
                    }
                }
            }
        }

        ion-col {
            text-align: center;
            line-height: 1.6rem;

            &.col-with-arrow {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        &.tabs-hidden {
            display: none !important;
            transform: translateY(0) !important;
        }
    }

    ::ng-deep {
        core-tab, .core-tab {
            display: none;
            height: 100%;
            position: relative;
            z-index: 1;

            &.selected {
                display: contents;
            }

            ion-header {
                display: none;
            }

            .fixed-content, .scroll-content {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
        }
    }

    div.core-tabs-content-container {
        flex-grow: 1;
        position: relative;
    }
}


:host-context(.ios) {
    --height: 53px;
}