.mobile-menu {
  color: $color-plum-200;
  background: $color-plum-800;
  position: relative;
  padding: spacer(16) spacer(16) spacer(32) spacer(16);
  @media (max-width: $viewport-lg) and (min-width: $viewport-ms) {
    margin: spacer(0) spacer(32);
  }
  @media (max-width: $viewport-ms) and (min-width: $viewport-sm) {
    margin: spacer(0) spacer(16);
  }
  @media (min-width: $viewport-lg) {
    display: none;
  }
  .mobile-pointer {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 35px;
    bottom: -15px;
    background: $color-plum-800;
    transform: rotate(-45deg);
    z-index: 0;
  }
  nav {
    display: block;
    @include margin(16, top);
    a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }
    [data-reach-menu] {
      a {
        display: flex;
      }
    }
    li {
      line-height: toRem(40);
      @media (hover: none) {
        margin-bottom: spacer(24);
        line-height: 1;
      }
    }
    li:last-child {
      margin-bottom: 0;
    }
  }
  .search-input {
    width: 100%;
    [data-reach-combobox] {
      width: 100%;
    }
  }
}

.mobile-menu-expanded {
  display: block;
  @media (min-width: $viewport-lg) {
    display: none;
  }
}

.mobile-toggle {
  background: transparent;
  border: none;
  font-weight: bold;
  margin-top: spacer(24);
  color: white;
  cursor: pointer;
  margin-top: 0;
  &.flip-colors {
    color: $color-plum-700;
  }
  @media (min-width: $viewport-lg) {
    display: none;
  }
}

.mobile-search-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
