@import '../material-action-bar/index.less';

.van-material-add {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 96px);
  max-height: calc(100vh - 96px);
  // The simulator reserves a 56px host bar below the iframe. Keep the panel
  // above it so its bottom action bar is always within the visible viewport.
  bottom: 56px;
  overflow: hidden;
  background: var(--van-gray-2);

  > .van-action-sheet__content { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 0; padding: 0; overflow: hidden; }
  &__nav { flex: none; --van-nav-bar-background-color: var(--van-gray-2); }
  &__nav .van-nav-bar__left--slot { left: var(--van-padding-md); }
  &__nav .van-nav-bar__right--slot { right: var(--van-padding-md); }
  &__search { flex: none; padding: 8px var(--van-padding-md); --van-search-padding: 0; --van-search-background-color: var(--van-gray-2); --van-search-content-background-color: var(--van-white); .van-search__field { padding-left: 0; } }
  &__tabs { flex: none; padding-left: 8px; --van-tabs-line-height: 44px; --van-tab-font-size: var(--van-font-size-md); --van-tabs-bottom-bar-width: 40px; --van-tabs-nav-background-color: transparent; }
  &__filter-tags { display: flex; flex: none; gap: 6px; padding: 12px var(--van-padding-md); .van-filter-tag { min-width: 56px; --van-filter-tag-background-color: var(--van-gray-4); } }
  &__body { flex: 1; min-height: 0; padding: 0 var(--van-padding-md) 12px; overflow-y: auto; }
  &__tree-card { margin-bottom: 12px; overflow: hidden; background: var(--van-white); border-radius: 8px; }
  &__catalog-leaf { overflow: hidden; }
  &__material-list { overflow: hidden; background: var(--van-white); border-radius: 8px; }
  &__search-state { display: flex; align-items: center; justify-content: center; min-height: 160px; }
  &__footer { position: relative; z-index: 2; flex: none; background: var(--van-white); box-shadow: 0 -2px 5px rgb(27 33 41 / 10%); .van-bottom-action-bar { box-shadow: none; } }
  &__selected-panel { position: absolute; right: 0; bottom: 60px; left: 0; display: flex; flex-direction: column; max-height: 340px; overflow: hidden; background: var(--van-white); box-shadow: 0 -2px 5px rgb(27 33 41 / 10%); }
  &__selected-header { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--van-padding-md) 4px; }
  &__clear, &__collapse { padding: 0; background: transparent; border: 0; }
  &__clear { color: var(--van-primary-color); font: inherit; font-size: var(--van-font-size-md); }
  &__collapse { display: inline-flex; gap: 2px; align-items: center; color: var(--van-gray-6); font: inherit; font-size: var(--van-font-size-md); }
  &__selected-list { display: flex; flex-direction: column; gap: 6px; padding: var(--van-padding-xs) var(--van-padding-md); overflow-y: auto; }
  &__detail-page { position: fixed; z-index: 3000; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--van-gray-2); }
  &__detail-banner { position: absolute; top: 0; right: 0; left: 0; height: 320px; overflow: hidden; background: var(--van-gray-8); }
  &__detail-swipe { height: 320px; touch-action: pan-y; }
  &__detail-image { width: 100%; height: 310px; background-position: center; background-size: cover; }
  &__detail-image--motor { background-image: url('/dog1.jpg'); }
  &__detail-image--blower { background-image: url('/dog2.jpg'); }
  &__detail-image--coil { background-image: url('/dog3.jpg'); }
  &__detail-dots { position: absolute; z-index: 2; top: 226px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); > i { width: 6px; height: 6px; background: rgb(255 255 255 / 55%); border-radius: 50%; } }
  &__detail-dot--active { background: var(--van-white) !important; }
  &__detail-close { position: absolute; z-index: 1; top: 56px; left: var(--van-padding-md); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--van-gray-9); background: var(--van-gray-3); border: 0; border-radius: 50%; box-shadow: 0 2px 5px rgb(27 33 41 / 10%); }
  &__detail-content { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: 246px; overflow: hidden; background: var(--van-white); border-radius: 16px 16px 0 0; }
  &__detail-body { flex: 1; min-height: 0; padding: 16px var(--van-padding-md) 24px; overflow-y: auto; }
  &__detail-section + &__detail-section { margin-top: 24px; }
  &__detail-section .van-blue-mark-header { margin-bottom: 8px; padding: 0; }
  &__detail-card { padding: 8px 12px; color: var(--van-gray-9); font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); background: linear-gradient(90deg, var(--van-gray-2), rgb(241 244 246 / 20%)); border-radius: 8px; }
  &__detail-info-rows { display: flex; flex-direction: column; gap: 8px; }
  &__detail-row { display: flex; gap: 16px; justify-content: space-between; min-height: 22px; > span { flex: none; width: 56px; color: var(--van-gray-6); } > strong { flex: 1; color: var(--van-gray-9); font-weight: 400; text-align: right; white-space: pre-line; } }
  &__detail-link { color: var(--van-primary-color) !important; font-weight: var(--van-font-weight-bold) !important; }
}

.van-material-add-detail-enter-active {
  transition: transform var(--van-animation-duration-fast)
    var(--van-animation-timing-function-enter);
  will-change: transform;
}

.van-material-add-detail-leave-active {
  transition: transform var(--van-animation-duration-fast)
    var(--van-animation-timing-function-leave);
  will-change: transform;
}
.van-material-add-detail-enter-from,
.van-material-add-detail-leave-to { transform: translateY(100%); }

.van-material-add-detail-section-enter-active,
.van-material-add-detail-section-leave-active { overflow: hidden; transition: max-height .2s ease, opacity .2s ease; }
.van-material-add-detail-section-enter-from,
.van-material-add-detail-section-leave-to { max-height: 0; opacity: 0; }
.van-material-add-detail-section-enter-to,
.van-material-add-detail-section-leave-from { max-height: 480px; opacity: 1; }

.van-material-add-item {
  position: relative;
  padding: 10px var(--van-padding-md);
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:active { background-color: var(--van-active-color); }

  &--selected {
    padding: 10px var(--van-padding-md);
    background: var(--van-gray-2);
    border-radius: 8px;

    &::after { display: none; }
  }

  &:not(:last-child)::after {
    position: absolute;
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    height: 1px;
    background: var(--van-border-color);
    transform: scaleY(.5);
    content: '';
  }

  &__main { display: flex; align-items: center; min-height: 22px; }
  &__detail { display: inline-flex; flex: 1; gap: 2px; align-items: center; min-width: 0; padding: 0; overflow: hidden; color: var(--van-gray-9); font: inherit; font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); text-align: left; background: transparent; border: 0; > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
  &__kind-tag { flex: none; margin-left: 4px; }
  &__stepper { flex: none; margin-left: 8px; --van-stepper-input-width: 32px; --van-stepper-input-height: 18px; --van-stepper-input-font-size: var(--van-font-size-md); --van-stepper-input-line-height: var(--van-line-height-lg); }
  &__unit { width: 32px; margin-left: 8px; overflow: hidden; color: var(--van-text-color-2); font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); text-overflow: ellipsis; white-space: nowrap; }
  &__desc { margin: 4px 0 0; overflow: hidden; color: var(--van-gray-6); font-size: var(--van-font-size-sm); line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
  &__keyword { color: var(--van-primary-color); }
}