/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
.xh-tab {
  font-size: var(--xh-button-font-size-px);

  // Icon with title
  .xh-icon:not(:last-child) {
    margin-right: var(--xh-pad-half-px);
  }

  // Icon without title
  .xh-icon:last-child {
    font-size: 20px;
  }
}

.xh-tab-page .page__content {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  transform: translateX(0);
}

// Theme the page backdrop. Onsen renders an opaque, light-by-default `.page__background` behind
// each page's content, and the content itself is forced transparent (so the app background shows
// through). That leaves the light backdrop visible for tab content that is not itself a panel,
// rendering themed text unreadable in dark mode - so paint the backdrop with the app background.
.xh-tab-page .page__background {
  background-color: var(--xh-bg);
}

.xh-tab-container {
  // Override Onsen's tabbar height CSS var
  --tabbar-height: var(--xh-tbar-min-size-px);

  position: relative;
  flex: auto;

  &--top .tabbar {
    border-bottom: var(--xh-border-solid);
  }

  &--bottom .tabbar {
    border-top: var(--xh-border-solid);
  }

  .tabbar {
    height: var(--xh-tbar-min-size-px);
    line-height: var(--xh-tbar-min-size-px);

    &__button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--xh-tbar-min-size-px);
      line-height: var(--xh-tbar-min-size-px);
      color: var(--xh-text-color);
    }
  }

  // Tab visibility is managed via TabContainerModel.renderMode, rather than Onsen's internal state.
  .ons-swiper-target.active:not(.swiping) > .xh-tab-page:not([shown]) {
    visibility: initial;
  }
}