.vm-modal-header-container {
  width: 100%;
  height: 116px;
  border-radius: 8px 8px 0 0;
  background: var(--modal-head-bg);
  padding: 0 16px;
  margin-top: 1px;
}

.vm-modal-header-wrap {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  &::after {
    position: absolute;
    top: 54px;
    left: 0;
    content: '';
    width: 180px;
    height: 1px;
    background: var(--modal-head-line-bg);
    box-shadow: var(--modal-head-line-shadow);
    border-radius: 8px;
    animation: move 6s linear infinite;

    @keyframes move {
      0% {
        left: 0;
      }

      100% {
        left: calc(100% - 180px);
      }
    }
  }

  &-left {
    display: flex;
    align-items: center;
    gap: 8px;

    &-title {
      font-weight: bold;
      font-size: 20px;
      color: var(--modal-title-color);
    }

    &-tag {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 24px;
      border-radius: 16px;
      font-size: 12px;
      padding: 0 8px;
      border: 1px solid;
    }
  }

  &-right {
    display: flex;
    align-items: center;
    gap: 16px;

    &-close {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--modal-close-color);
      width: 28px;
      height: 28px;
      cursor: pointer;
      font-size: 16px;
    }

    &-line {
      width: 1px;
      height: 14px;
      background-color: var(--modal-head-split-line-color);
    }

    &-collect {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;

      &.active {
        background: var(--collect-bg);
      }
    }
  }
}
