@use "vuepress-shared/styles/wrapper";
@use "@sass-palette/hope-config";

@media (min-width: hope-config.$laptop) {
  .chart-wrapper,
  .flowchart-wrapper,
  .mermaid-wrapper {
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track-piece {
      -webkit-border-radius: 8px;
      border-radius: 8px;
      background: rgb(0 0 0 / 10%);
    }
  }
}

// rtl
#{hope-config.$rtl-selector} a.header-anchor {
  float: right;
}

// docsearch fix
// stylelint-disable selector-class-pattern
#docsearch-container {
  min-width: 145.7px !important;

  @media (max-width: hope-config.$pad) {
    min-width: 36px !important;
  }
}

.DocSearch {
  &.DocSearch-Button {
    margin-left: 0;

    @media (max-width: hope-config.$pad) {
      min-width: 36px !important;
    }
  }

  .DocSearch-Button-Placeholder {
    display: inline-block;
    padding: 4px 12px 4px 6px;
    font-size: 14px;

    @media (max-width: 719px) {
      display: none;
    }
  }

  .DocSearch-Search-Icon {
    width: 1.25em;
    height: 1.25em;
  }

  .DocSearch-Button-Keys {
    @media (max-width: hope-config.$pad) {
      display: none;
    }
  }

  .DocSearch-Button-Key {
    background: var(--bg-color);
    box-shadow: none;
  }
}
// stylelint-enable selector-class-pattern