/* 与小程序 tabBar 对齐的 H5 底部导航；页面需引入本文件并在 body 前闭合前执行 tabbar.js */

:root {
  --tabbar-rpx: min(calc(100vw / 750), 1.2px);
  --tabbar-bg: #ffffff;
  --tabbar-border: #eeeeee;
  --tabbar-inactive: #888888;
  --tabbar-active: #ff4040;
  --tabbar-icon: calc(50 * var(--tabbar-rpx));
  --tabbar-safe: env(safe-area-inset-bottom, 0px);
}

body.has-site-tabbar {
  padding-bottom: calc(var(--tabbar-icon) + calc(44 * var(--tabbar-rpx)) + var(--tabbar-safe) + calc(8 * var(--tabbar-rpx)));
}

.site-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  background: var(--tabbar-bg);
  border-top: 1px solid var(--tabbar-border);
  padding-top: calc(6 * var(--tabbar-rpx));
  padding-bottom: calc(6 * var(--tabbar-rpx) + var(--tabbar-safe));
  box-sizing: border-box;
}

.site-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--tabbar-rpx));
  min-width: 0;
  padding: calc(4 * var(--tabbar-rpx)) calc(4 * var(--tabbar-rpx));
  text-decoration: none;
  color: var(--tabbar-inactive);
  font-size: calc(22 * var(--tabbar-rpx));
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

.site-tabbar__icon {
  width: var(--tabbar-icon);
  height: var(--tabbar-icon);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  opacity: 0.9;
  filter: grayscale(1);
}

.site-tabbar__item--active {
  color: var(--tabbar-active);
}

.site-tabbar__item--active .site-tabbar__icon {
  filter: none;
  opacity: 1;
}

.site-tabbar__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 地图页右下角悬浮按钮避免压住 tabBar */
body.has-site-tabbar .go-here-btn {
  bottom: calc(40 * var(--tabbar-rpx) + var(--tabbar-icon) + calc(40 * var(--tabbar-rpx)) + var(--tabbar-safe) + calc(12 * var(--tabbar-rpx)));
}