.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  padding: 0 16px;
  z-index: 50;
  pointer-events: none;

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.order-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.order-bar .order-action {
  pointer-events: auto;
}

.order-action {
  position: relative;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--surface-inverse);
  border-radius: var(--radius-md);

  display: inline-flex;
  justify-content: space-between;
  align-items: center;

  box-shadow: var(--shadow-order);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.order-action:active {
  transform: scale(0.98);
}

.order-count,
.order-sum {
  width: 100px;
  font-size: var(--font-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-caption);
  letter-spacing: -0.08px;
  color: var(--text-inverse);
}

.order-sum {
  text-align: right;
}

.order-label-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  font-size: var(--font-cta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: -0.4px;
  color: var(--text-inverse);
  white-space: nowrap;
  pointer-events: none;
}