/**
 * The elevation transition duration
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-bottom-bar {
  background-color: var(--md-elevation-8);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  width: 100%;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-bottom-bar > .md-ripple {
  display: flex;
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active {
  color: var(--md-primary);
}
.md-bottom-bar.md-type-shift {
  background-color: var(--md-primary);
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item {
  color: var(--md-on-primary-medium);
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active {
  color: var(--md-on-primary);
}
.md-bottom-bar.md-accent.md-type-fixed .md-bottom-bar-item.md-active {
  color: var(--md-secondary);
}
.md-bottom-bar.md-accent.md-type-shift {
  background-color: var(--md-secondary);
}
.md-bottom-bar.md-accent.md-type-shift .md-bottom-bar-item {
  color: var(--md-on-primary-medium);
}
.md-bottom-bar.md-accent.md-type-shift .md-bottom-bar-item.md-active {
  color: var(--md-on-secondary);
}
.md-bottom-bar.md-type-fixed {
  justify-content: center;
}
.md-bottom-bar.md-type-fixed.md-accent > .md-ripple .md-ripple-wave {
  background-color: var(--md-secondary);
}
.md-bottom-bar.md-type-fixed > .md-ripple .md-ripple-wave {
  background-color: var(--md-primary);
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
  min-width: 80px;
  max-width: 168px;
  color: var(--md-on-surface-medium);
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color;
  will-change: color;
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item .md-bottom-bar-label {
  transform: scale(0.8571) translate3d(0, 4px, 0);
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-ripple {
  padding-top: 6px;
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-bottom-bar-icon {
  transform: translate3d(0, -2px, 0);
}
.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-bottom-bar-label {
  transform: translate3d(0, 3px, 0);
}
.md-bottom-bar.md-type-shift {
  justify-content: center;
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item {
  min-width: 56px;
  max-width: 96px;
  flex: 1 1 32px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: padding, min-width, max-width, flex, color;
  will-change: padding, min-width, max-width, flex, color;
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item > .md-ripple {
  padding: 16px;
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-bottom-bar-icon {
  transform: translate3d(0, 8px, 0);
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-bottom-bar-label {
  opacity: 0;
  transform: scale(0.7) translate3d(0, 6px, 0);
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active {
  min-width: 96px;
  max-width: 168px;
  flex: 1 1 72px;
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-ripple {
  padding: 6px 0 10px;
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-bottom-bar-icon {
  transform: translate3d(0, 0, 0);
}
.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-bottom-bar-label {
  opacity: 1;
  transform: translate3d(0, 3px, 0);
}
.md-bottom-bar .md-bottom-bar-item {
  height: 56px;
  margin: 0;
  flex: 1;
  cursor: pointer;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  text-transform: none;
}
.md-bottom-bar .md-bottom-bar-item .md-ripple {
  padding: 8px 12px 10px;
  transition: padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: padding;
}
.md-bottom-bar .md-bottom-bar-item .md-button-content {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.md-bottom-bar .md-bottom-bar-item .md-button-content > .md-icon:not(:only-child), .md-bottom-bar .md-bottom-bar-item .md-button-content > .md-spinner:not(:only-child) {
  margin: 0;
}
.md-bottom-bar .md-bottom-bar-item .md-bottom-bar-icon {
  font-size: 24px;
}
.md-bottom-bar .md-bottom-bar-item .md-bottom-bar-icon,
.md-bottom-bar .md-bottom-bar-item .md-bottom-bar-label {
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, opacity;
  will-change: transform, opacity;
}