:root{
  --tab-bar-height:76px;
}

body{
  padding-bottom:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px));
}

.tabs{
  position:fixed!important;
  inset-inline:0;
  bottom:0!important;
  width:100%;
  height:calc(var(--tab-bar-height) + env(safe-area-inset-bottom,0px));
  min-height:var(--tab-bar-height);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  margin:0;
  isolation:isolate;
  transform:translateZ(0);
}

.tabs::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:max(100px,env(safe-area-inset-bottom,0px));
  background:#fff;
  pointer-events:none;
}

.tabs button{
  position:relative;
  z-index:1;
}

@supports (height:100dvh){
  html,body{
    min-height:100dvh;
  }
}