@import '../kioskSale/selfServiceBar.less';

.vm-bottom-bar-layout {
  .kiosk-self-service-bar-metrics();
  --vm-bottom-bar-space: calc(
    var(--pisell-kiosk-cart-capsule-bottom) +
      var(--pisell-kiosk-cart-capsule-min-height) +
      var(--pisell-kiosk-cart-capsule-content-gap) +
      var(--vm-bottom-bar-secondary-space, 0px)
  );
  position: relative;
  container: vending-bottom-bar / inline-size;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.vm-bottom-bar-with-secondary {
  --vm-bottom-bar-secondary-space: 76px;
}

.vm-bottom-bar-secondary {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: calc(
    var(--pisell-kiosk-cart-capsule-bottom) +
      var(--pisell-kiosk-cart-capsule-min-height) + 12px
  );
  left: 18px;
  display: flex;
  width: max-content;
  max-width: calc(100% - 36px);
  height: 64px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--vm-primary);
  font-family: 'Vending DM Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;

  svg {
    flex: none;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &:focus-visible {
    outline: 3px solid var(--vm-primary);
    outline-offset: 3px;
  }
  &:disabled {
    opacity: 0.35;
    cursor: default;
  }
  &:not(:disabled):active {
    transform: scale(0.97);
  }
}

.vm-bottom-bar {
  .kiosk-self-service-bar-frame();
  z-index: 8;
  font-family: 'Vending DM Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.5;

  button {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    touch-action: manipulation;

    &:focus-visible {
      outline: 3px solid var(--vm-primary);
      outline-offset: 4px;
    }
    &:disabled {
      cursor: default;
      opacity: 0.35;
    }
    &:not(:disabled):active {
      transform: scale(0.97);
    }
  }

  .vm-catalog-bar-button,
  .vm-catalog-bar-cart,
  .vm-catalog-bar-promotion {
    .kiosk-self-service-bar-button();
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #111827;

    .vm-prototype-icon {
      font-size: 28px;
    }
  }
  .vm-catalog-bar-promotion {
    svg {
      flex: none;
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
    }

    &[aria-pressed='true'] {
      border-color: var(--vm-primary);
      color: var(--vm-primary);
    }
  }
  .vm-catalog-bar-next {
    min-width: 144px;
    border-color: var(--vm-primary);
    background: var(--vm-primary);
    color: var(--vm-primary-foreground);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.18);

    &:not(:disabled):hover {
      border-color: var(--vm-primary-hover);
      background: var(--vm-primary-hover);
    }
    &:not(:disabled):active {
      border-color: var(--vm-primary-active);
      background: var(--vm-primary-active);
    }
  }
  .vm-catalog-bar-summary {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }
  .vm-catalog-bar-amount {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;

    > span {
      color: rgba(255, 255, 255, 0.72);
      font-size: 16px;
      white-space: nowrap;
    }
    > strong {
      max-width: 100%;
      overflow: hidden;
      font-size: 28px;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:disabled {
      opacity: 1;
    }
  }
  .vm-catalog-bar-cart {
    min-width: 96px;
    padding: 0 16px;
    font-variant-numeric: tabular-nums;

    svg {
      width: 32px;
      height: 32px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
}

@container vending-bottom-bar (max-width: 900px) {
  .vm-bottom-bar .vm-catalog-bar-promotion > span {
    display: none;
  }
}

@container vending-bottom-bar (max-width: 620px) {
  .vm-bottom-bar-secondary {
    font-size: 18px;
  }
  .vm-bottom-bar {
    .kiosk-self-service-bar-compact-frame();

    .vm-catalog-bar-button,
    .vm-catalog-bar-cart,
    .vm-catalog-bar-promotion {
      .kiosk-self-service-bar-compact-button();

      .vm-prototype-icon {
        font-size: 20px;
      }
    }
    .vm-catalog-bar-promotion svg {
      width: 22px;
      height: 22px;
    }
    .vm-catalog-bar-summary {
      gap: 8px;
    }
    .vm-catalog-bar-amount > strong {
      font-size: 22px;
    }
    .vm-catalog-bar-cart svg {
      width: 20px;
      height: 20px;
    }
  }
}

@container vending-bottom-bar (max-width: 450px) {
  .vm-bottom-bar {
    .vm-catalog-bar-button .vm-prototype-icon {
      display: none;
    }
    .vm-catalog-bar-button,
    .vm-catalog-bar-cart,
    .vm-catalog-bar-promotion {
      padding-inline: 8px;
      gap: 4px;
    }
    .vm-catalog-bar-amount > span {
      font-size: 12px;
    }
    .vm-catalog-bar-amount > strong {
      font-size: 20px;
    }
  }
}