HBM/md-components

@import "./base";

.mdc-BottomNavigation {
  position: relative;
  overflow: hidden;
  height: 100%;

  @include medium {
    position: initial;
    width: 100%;
    display: flex;
  }
}

.mdc-BottomNavigation-content {
  height: 100%;
  padding-bottom: 56px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  @include medium {
    order: 2;
    flex-grow: 1;
    padding-bottom: 0;
  }
}

@include xlarge {
  .mdc-Navigation + .mdc-BottomNavigation {
    padding-left: $navigation-width;
    width: calc(100vw - #{$navigation-width});
    box-sizing: content-box;

    main {
      padding-left: 0;
    }
  }
}

.mdc-BottomNavigation-menu {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 -3px 7px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #f1f1f1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  background-color: white;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s 0.1s ease;
  justify-content: center;
  box-sizing: content-box;

  @include medium {
    transform: none;
    padding-top: 12px;
    position: initial;
    order: 1;
    flex-grow: 0;
    width: 72px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fdfdfd;
    border-top: none;
    border-right: 1px solid #f1f1f1;
    box-shadow: none;
  }
}

@include medium {
  .mdc-BottomNavigation-menu {
    position: fixed; // prevent overflow scroll bounce movement
  }

  .mdc-BottomNavigation-content {
    padding-left: 72px;
  }

  .mdc-Header + .mdc-BottomNavigation,
  .mdc-Header + .mdc-Navigation + .mdc-BottomNavigation {
    .mdc-BottomNavigation-menu {
      top: $header-height;
    }
  }
}

@include xlarge {
  .mdc-BottomNavigation-menu {
    left: $navigation-width;
  }
}

.mdc-BottomNavigation.scrolling .mdc-BottomNavigation-menu {
  transform: translate3d(0, 110%, 0);

  @include medium {
    transform: none;
  }
}

.mdc-BottomNavigation-menu--narrow .mdc-BottomNavigation-menu-item > *:not(.active) .mdc-BottomNavigation-menu-item-text {
  display: none;
}

.mdc-BottomNavigation-menu-item {
  min-width: 80px;
  font-size: 12px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & > a { // user defined / custom Link element --> no classname
    transform: translate3d(0, 0, 0);
    transition: transform 0.1s ease;
    text-decoration: none;
    color: #757575;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  flex-grow: 1;
  cursor: pointer;

  svg {
    fill: #757575;
    flex-shrink: 0;
  }

  max-width: 169px;

  @include medium {
    padding: 0;
    flex-grow: 0;
    height: 56px;
    min-width: 72px;

    .mdc-BottomNavigation-menu-item-text {
      display: none;
    }
  }
}

.mdc-BottomNavigation-menu-item > .active {
  svg {
    fill: $blue-dark;
  }

  color: $blue-dark;
  font-size: 14px;
  transform: translate3d(0, -1px, 0); // the font size here is +2px, so the translate should be -2px as well but it looks odd
}

.mdc-BottomNavigation-menu--inverted {
  .mdc-BottomNavigation-menu-item {
    background-color: $blue-dark;

    svg {
      fill: rgba(255, 255, 255, 0.73);
    }

    color: rgba(255, 255, 255, 0.73);
  }

  .mdc-BottomNavigation-menu-item.active {
    svg {
      fill: white;
    }

    color: white;
  }
}