:root {
  --mobile-tab-height: 54px;
  --mobile-tab-bg: var(--body-bg);
  --mobile-tab-zindex: var(--zindex-header);
  --mobile-tab-shadow: 0 2px 6px var(--shadow-color);
  --mobile-tab-item-color: var(--header-control-color);
}

.MobileTab {
  @media @tablet-up {
    display: none;
  }

  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: ~"calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0))";
  background: var(--mobile-tab-bg);
  box-shadow: var(--mobile-tab-shadow);
  z-index: var(--mobile-tab-zindex);
  isolation: isolate;

  &-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    height: 100%;

    margin: 0 auto;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    text-align: center;

    li {
      flex-basis: 100%;
    }

    a,
    > li > .Button,
    > li > .Dropdown {
      color: var(--mobile-tab-item-color);
      display: block;
      width: 100%;
      -webkit-tap-highlight-color: fade(@control-bg, 60%);
      padding-top: 5px;
      height: 100%;
      text-align: center;
    }

    > li > a {
      &:hover {
        text-decoration: none;
      }
    }

    // Style buttons but not buttons in dropdowns
    > li > .Button > .Button,
    > li > a > .Button,
    > li > .Dropdown > .Button > .Button {
      padding: 0;
      margin: 0;
      color: var(--mobile-tab-item-color);
      background: transparent;

      &-icon {
        margin-right: 0;
        margin-bottom: 6px;
        font-size: 20px;
      }

      &-label {
        display: block;
        font-size: 9px;
        line-height: 1em;
        margin: 0;
      }
    }

    > li > .ButtonGroup.Dropdown {
      padding: 0;
    }

    > li > .ButtonGroup.Dropdown > .Button {
      float: none;
      width: 100%;

      &:focus,
      &:active {
        background: transparent;
        box-shadow: none;
      }
    }

    .item-session {
      > .Dropdown > .Button {
        padding: 0;
      }

      .Button:hover,
      .Button:active {
        background: transparent;
      }
    }

    .SessionDropdown {
      .Avatar {
        margin: 0 0 6px;
        border: 1px solid var(--control-bg);
      }
    }

    a[active="true"] {
      color: var(--primary-color);
    }

    .item-notifications .Button-label {
      position: relative;
    }

    .NotificationsDropdown-unread {
      top: -28px;
      left: 50%;
    }
  }
}
