@import './var.less';

:root {
  --van-title-bar-padding: @title-bar-padding;
  --van-title-bar-gap: @title-bar-gap;
  --van-title-bar-bottom-gap: @title-bar-bottom-gap;
  --van-title-bar-title-color: @title-bar-title-color;
  --van-title-bar-description-color: @title-bar-description-color;
  --van-title-bar-required-color: @title-bar-required-color;
  --van-title-bar-action-divider-before-gap: @title-bar-action-divider-before-gap;
  --van-title-bar-action-divider-after-gap: @title-bar-action-divider-after-gap;
  --van-title-bar-action-divider-color: @title-bar-action-divider-color;
  --van-title-bar-action-divider-height: @title-bar-action-divider-height;
  --van-title-bar-action-padding: @title-bar-action-padding;
}

.van-title-bar {
  margin-bottom: var(--van-title-bar-bottom-gap);
  color: var(--van-title-bar-title-color);

  &__header { display: flex; box-sizing: border-box; align-items: flex-start; width: 100%; padding: var(--van-title-bar-padding); color: inherit; font: inherit; text-align: left; background: transparent; border: 0; }
  &--required &__header { position: relative; overflow: visible; }
  &--required &__header::before { position: absolute; top: 12px; left: var(--van-padding-xs); color: var(--van-title-bar-required-color); font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); content: '*'; }
  &--expandable &__header { cursor: pointer; &:active { background: var(--van-active-color); } }
  &__icon { flex: none; margin: 3px 4px 0 0; font-size: 16px; }
  &__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  &__title-row { display: flex; align-items: center; min-width: 0; }
  &__text strong { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: var(--van-font-size-md); font-weight: var(--van-font-weight-bold); line-height: var(--van-line-height-lg); text-overflow: ellipsis; white-space: nowrap; }
  &__description { overflow: hidden; color: var(--van-title-bar-description-color); font-size: var(--van-font-size-sm); font-weight: 400; line-height: var(--van-line-height-md); text-overflow: ellipsis; white-space: nowrap; }
  &__action { display: flex; flex: none; align-items: center; margin-left: var(--van-title-bar-action-divider-before-gap); }
  &__action-divider { width: 1px; height: var(--van-title-bar-action-divider-height); margin-right: var(--van-title-bar-action-divider-after-gap); background: var(--van-title-bar-action-divider-color); }
  &__action .van-button { flex: none; height: var(--van-line-height-lg); padding: var(--van-title-bar-action-padding); font-size: var(--van-font-size-md); font-weight: var(--van-font-weight-bold); line-height: var(--van-line-height-lg); }
  &__arrow { flex: none; margin: 4px 8px 0 0; color: var(--van-gray-6); font-size: 14px; transition: transform var(--van-animation-duration-fast); transform: rotate(180deg); }
  &__arrow--expanded { transform: rotate(0); }
  &__right-icon { flex: none; width: 16px; height: 16px; margin: 3px 0 0 8px; color: var(--van-gray-7); font-size: 16px; line-height: 16px; }
  &--mini &__header { padding-top: 12px; padding-bottom: 8px; }
  &--mini &__text strong { font-size: var(--van-font-size-sm); line-height: var(--van-line-height-md); }
  &--mini &__icon { margin-top: 3px; font-size: 14px; }
  &--mini &__arrow { margin-top: 3px; }
  &--mini &__right-icon { width: 12px; height: 12px; margin-top: 3px; font-size: 12px; line-height: 12px; }
  &--mini &__action .van-button { height: var(--van-line-height-md); font-size: var(--van-font-size-sm); line-height: var(--van-line-height-md); }
  &--bottom-gap-4 { margin-bottom: 4px; }
  &--bottom-gap-8 { margin-bottom: 8px; }
  &--bottom-gap-12 { margin-bottom: 12px; }
}