:root {
  --v-site-header-position: relative;
}

.v-best {
  --v-best-body-min-height: calc(
    var(--v-viewport-height, 100dvh) - var(--v-bottom-bar-height, 0px)
  );
  --v-tab-button-font-weight-selected: var(--v-font-bold);
}
.v-best .v-tab {
  --v-slides-offset: 16px;
}
.v-best .v-tab swiper-slide .v-tab-button {
  padding-left: calc(var(--v-slides-offset) / 2);
  padding-right: calc(var(--v-slides-offset) / 2);
}
.v-best .v-tab swiper-slide:first-child .v-tab-button {
  padding-left: 0;
}
.v-best .v-tab swiper-slide:last-child .v-tab-button {
  padding-right: 0;
}

.v-best-head {
  --v-tab-button-padding-bottom: 0;
  --v-tab-button-font-size: 16px;
  position: sticky;
  z-index: calc(var(--v-site-header-z) - 1);
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding-block: var(--v-best-head-margin, var(--v-space-3));
}

body:has(.v-sub-header--autohide).scroll-up {
  --v-sticky-bar-y: var(--v-site-header-height, 0px);
}
body:has(.v-sub-header--autohide).scroll-down {
  --v-sticky-bar-y: 0px;
}
body:has(.v-sub-header--autohide) .v-best-head {
  z-index: var(--v-site-header-z);
  transition: transform var(--v-sub-header-transition-duration, 0.2s) var(--v-sub-header-transition-easing, ease-in-out);
  transform: translate3d(0, var(--v-sticky-bar-y, 0px), 0);
}

.v-best-body {
  min-height: var(--v-best-body-min-height);
  height: var(--v-best-body-height);
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: auto;
  padding-bottom: var(--v-best-body-padding-bottom, var(--v-bottom-bar-height, 0));
}

.v-best-controls {
  --v-button-height: auto;
  display: grid;
  grid-template-areas: "lead . trail";
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  padding-top: 16px;
  padding-inline: var(--v-side-margin, 24px);
  padding-block: var(--v-best-head-margin, var(--v-space-4));
  background-color: #fff;
  font-weight: var(--v-button-font-weight, 400);
  font-size: var(--v-button-font-size, 12px);
  color: var(--v-button-color, #929292);
  line-height: var(--v-button-line-height, 1.3);
}
.v-best-controls .v-best-controls__small-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  line-height: var(--v-button-line-height, 1.334);
}
.v-best-controls .v-best-controls__small-text .v-best-controls__tooltip-button {
  line-height: var(--v-button-line-height, 1.3);
}
.v-best-controls .v-best-controls__small-text .v-best-controls__tooltip-button svg {
  width: 16px;
  height: 16px;
}
.v-best-controls .v-menu-button {
  --v-button-height: auto;
  --v-button-font-size: 12px;
}
.v-best-controls .v-menu-button[aria-selected=true] {
  --v-button-text-color: #000;
  --v-button-font-weight: var(--v-font-bold);
}
.v-best-controls has-dropdown {
  --dropdown-min-width: 0;
  --dropdown-offset-top: 8px;
  --dropdown-right: 0px;
  z-index: 2;
}

.v-best-controls__lead,
.v-best-controls__trail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.v-best-controls__lead {
  grid-area: lead;
}

.v-best-controls__trail {
  grid-area: trail;
}

.v-best-controls__filter-button {
  --v-button-width: auto;
}
.v-best-controls__filter-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
  transform: rotate(var(--v-angle, 0deg));
}

.v-best-list {
  margin-inline: var(--v-side-margin);
}

.v-best-list__sub-content {
  background-color: #f6f6f6;
}
.v-best-list__sub-content .v-best-index-item__name {
  padding-left: 4px;
}

.v-best-body__title {
  padding: 24px var(--v-side-margin, 24px) 0;
  font-weight: var(--v-font-bold);
  font-size: 16px;
  line-height: 1.3;
}