// Table of Contents
// ==================================================
// Navbar
// Media Queries

// scss-lint:disable NestingDepth

// Navbar
// ==================================================
.navbar {
  background: color(white);
  border-collapse: separate;
  border-top: 1px solid color(haze);
  box-sizing: border-box;
  display: table;
  height: calc(54px + env(safe-area-inset-bottom));
  line-height: 1;
  table-layout: fixed;
  width: 100%;

  > a {
    display: table-cell;
    float: none;
    font-size: text-size(xxs);
    font-weight: text-weight(semibold);
    padding-top: 9px;
    text-align: center;
    vertical-align: top;
    width: 1%;

    &.primary {
      color: text-color-on(primary);
      background: color(primary);

      &:hover,
      &.active,
      &:active,
      &:focus { background: darkish-color(primary); }
    }

    > i {
      font-size: text-size(l);
      display: block;
      margin-bottom: 3px;
    }
  }

  &.fixed {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1040;
  }
}

// Media Queries
// ==================================================
@media only screen and (min-width: breakpoint-min-width(s)) {
  .navbar { display: none; }
}