@bottom-navigation-height: 50px;
@bottom-navigation-z-index: 1;
@bottom-navigation-background-color: #fff;
@bottom-navigation-border-color: #e3e3e3;
@bottom-navigation-fab-offset: 4px;

:root {
  --bottom-navigation-height: @bottom-navigation-height;
  --bottom-navigation-z-index: @bottom-navigation-z-index;
  --bottom-navigation-background-color: @bottom-navigation-background-color;
  --bottom-navigation-border-color: @bottom-navigation-border-color;
  --bottom-navigation-fab-offset: @bottom-navigation-fab-offset;
}

.var-bottom-navigation {
  width: 100%;
  height: var(--bottom-navigation-height);
  display: flex;
  position: relative;
  background-color: var(--bottom-navigation-background-color);
  transition: background-color 250ms, border-color 250ms;
  -webkit-tap-highlight-color: transparent;

  &--fixed {
    position: fixed;
    left: 0;
    bottom: 0;
  }

  &--border {
    border-top: 1px solid var(--bottom-navigation-border-color);
  }

  &__fab {
    width: var(--bottom-navigation-height);
    height: var(--bottom-navigation-height) !important;
    position: absolute !important;
    z-index: 2;
    transform: translateY(-50%);
    overflow: hidden !important;
    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
  }

  &--fab-center {
    right: calc(50% - var(--bottom-navigation-height) / 2);
  }

  &--fab-right {
    right: var(--bottom-navigation-fab-offset);
  }
}