.historyPage {
  .history-record.fixed {
    position: unset;
  }
}

.bewly-design.historyPage {
  // #region new history page
  .history-record.fixed .main-breadcrums {
    background-color: var(--bew-elevated);
    backdrop-filter: var(--bew-filter-glass-1);
  }
  // #endregion

  // #region old history page
  // #region theme color adaption part
  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
  :not(foobar) {
    .history-list .r-info .w-info .username:hover,
    .history-wrap a.btn,
    .history-dlg .hsbtn .cancel:hover {
      color: var(--bew-theme-color);
    }

    .history-wrap .warn .btn,
    .history-wrap .time-label.active,
    .history-wrap a.btn:hover {
      color: white;
    }

    .history-wrap a.btn,
    .history-wrap .time-label,
    .history-list .r-info .title:hover {
      color: var(--bew-theme-color);
    }

    .history-wrap .active,
    .history-wrap .history-btn .btn:hover,
    .history-wrap a.btn:hover,
    .history-wrap .active,
    .history-wrap .warn .btn,
    .history-list .cover-contain .progress,
    .nodata-btn,
    .history-dlg .hsbtn .sure {
      background-color: var(--bew-theme-color);
    }

    .go-top-m .go-top:hover {
      background-color: var(--bew-theme-color) !important;
    }

    .history-wrap .active:before,
    .history-wrap .time-label:after,
    .history-wrap .time-label.active:before {
      border-left-color: var(--bew-theme-color);
    }

    .history-wrap .history-btn .btn:hover,
    .history-dlg .hsbtn .cancel:hover {
      border-color: var(--bew-theme-color);
    }

    .b-head-search.input-active,
    .history-wrap a.btn,
    .history-wrap .time-label,
    .history-wrap .time-label.active,
    .history-wrap a.btn:hover,
    .go-top-m .go-top:hover {
      border-color: var(--bew-theme-color) !important;
    }

    .b-head-search .search-icon > img,
    .b-head-search .search-cancel > img {
      filter: var(--bew-filter-icon-glow);
    }
  }

  // #endregion

  // #region dark mode adaption part
  &.dark {
    .history-wrap .warn .txt,
    .history-wrap .b-head .b-head-t,
    .b-head-search,
    .history-list .r-info .title,
    .history-dlg .dlg-txt,
    .history-dlg .hsbtn .cancel {
      color: var(--bew-text-1);
    }

    .history-list .r-info .w-info .username {
      color: var(--bew-text-2);
    }

    .history-list .r-info .w-info .device,
    .history-list .r-info .w-info .pro-txt,
    .history-list .r-info .w-info .name {
      color: var(--bew-text-3);
    }

    .history-list .r-info .history-mark,
    .history-list .r-info .r-txt,
    .history-dlg,
    .history-dlg .hsbtn .cancel {
      border-color: var(--bew-border-color);
    }

    .go-top-m .go-top,
    .b-head-search {
      border-color: var(--bew-border-color) !important;
    }

    .history-list .l-info {
      border-right-color: var(--bew-fill-2);
    }

    .history-list .r-info .w-info .name {
      border-left-color: var(--bew-border-color);
    }

    .history-list .l-info .lastplay-time .history-red-round {
      border-left-color: var(--bew-fill-2);
    }

    .history-wrap .time-label:before {
      border-left-color: var(--bew-bg);
    }

    .history-list .r-info,
    .b-head-search .b-head-search_input {
      background-color: unset;
    }

    .history-dlg {
      background-color: var(--bew-content-solid);
    }

    .go-top-m .go-top {
      background-color: var(--bew-content-solid) !important;
    }
  }
  // #endregion
}
