@import './var.less';

:root {
  --van-material-display-bar-padding: @material-detail-padding;
  --van-material-display-bar-radius: @material-detail-radius;
  --van-material-display-bar-gap: @material-detail-gap;
  --van-material-display-bar-bottom-gap: @material-detail-bottom-gap;
  --van-material-display-bar-fields-gap: @material-detail-fields-gap;
  --van-material-display-bar-field-label-max-width: @material-detail-field-label-max-width;
  --van-material-display-bar-title-color: @material-detail-title-color;
  --van-material-display-bar-title-font-size: @material-detail-title-font-size;
  --van-material-display-bar-title-font-weight: @material-detail-title-font-weight;
  --van-material-display-bar-title-line-height: @material-detail-title-line-height;
  --van-material-display-bar-title-gap: @material-detail-title-gap;
  --van-material-display-bar-title-icon-size: @material-detail-title-icon-size;
  --van-material-display-bar-quantity-color: @material-detail-quantity-color;
  --van-material-display-bar-quantity-gap: @material-detail-quantity-gap;
  --van-material-display-bar-quantity-label-gap: @material-detail-quantity-label-gap;
}

.van-material-display-bar {
  overflow: hidden;
  background: var(--van-white);

  &--rounded { border-radius: var(--van-material-display-bar-radius); }

  &__body {
    display: flex;
    flex-direction: column;
    gap: var(--van-material-display-bar-gap);
    padding: var(--van-material-display-bar-padding);
  }

  &__header,
  &__quantity,
  &__title {
    display: flex;
    align-items: center;
  }

  &__header {
    justify-content: space-between;
    gap: var(--van-material-display-bar-gap);
    min-width: 0;
  }

  &__title {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--van-material-display-bar-title-gap);
    padding: 0;
    overflow: hidden;
    color: var(--van-material-display-bar-title-color);
    font: inherit;
    font-size: var(--van-material-display-bar-title-font-size);
    font-weight: var(--van-material-display-bar-title-font-weight);
    line-height: var(--van-material-display-bar-title-line-height);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;

    &:active { opacity: var(--van-active-opacity); }

    > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &__title-arrow {
    flex: none;
    color: var(--van-material-display-bar-title-color);
    font-size: var(--van-material-display-bar-title-icon-size);
  }

  &__quantity {
    flex: none;
    gap: var(--van-material-display-bar-quantity-gap);
    color: var(--van-material-display-bar-title-color);
    font-size: var(--van-material-display-bar-title-font-size);
    line-height: var(--van-material-display-bar-title-line-height);
    white-space: nowrap;

    strong {
      color: var(--van-material-display-bar-quantity-color);
      font-weight: var(--van-font-weight-bold);
    }
  }

  &__quantity-label { margin-right: var(--van-material-display-bar-quantity-label-gap); }

  &__stock-insufficient {
    flex: none;
    color: var(--van-red-500);
    font-size: var(--van-font-size-sm);
    line-height: var(--van-line-height-md);
    white-space: nowrap;
  }

  &__fields { display: flex; flex-direction: column; gap: var(--van-material-display-bar-fields-gap); width: 100%; }

  &__field.van-label:not(.van-label--vertical):not(.van-label--tag):not(.van-label--media) {
    min-width: 0;

    .van-label__label {
      max-width: var(--van-material-display-bar-field-label-max-width);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .van-label__value,
    .van-label__text,
    .van-label__link {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .van-label__text,
    .van-label__link { display: block; }
  }

  &__divider.van-divider {
    margin: 0 var(--van-padding-md);
  }

  &__bottom { display: flex; flex-direction: column; gap: var(--van-material-display-bar-bottom-gap); }

  &__swipe-cell {
    overflow: hidden;
    background: var(--van-gray-2);

    &--rounded { border-radius: var(--van-material-display-bar-radius); }
  }

  &__delete {
    width: calc(100% - 8px);
    height: 100%;
    margin: 0 4px;
    border: 0;
    border-radius: 8px;
  }
}