@use "colors";
@use "default";
@use "home";
@use "./breakpoints.scss" as breakpoints;

@tailwind base;
@tailwind components;
@tailwind utilities;

/* KaTeX renders the input twice by default, once in HTML and one in MathML */
.katex-html {
  display: none;
}

html[data-theme="dark"] {
  background: var(--click-color-background);
  background-attachment: fixed;
}

/* This is a fix for the issue where paragraphs have 1rem margin bottom but
look strange when there is a code block after the paragraph
*/
p {
  margin-bottom: 0rem;
}

/* We only want to have a gap between successive paragraphs elements,
not between paragraphs and other elements like code blocks
*/
p + * {
  margin-top: 1rem;
}

/*
Fix for the issue where there is no gap between a paragraph which follows
a list
 */
ul + p,
ol + p {
  margin-top: 1rem;
}

body {
  font-size: var(--default-font);
  line-height: var(--default-line-height);
  font-family: var(--ifm-font-family-base), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.navbar-sidebar {
  background: inherit;
  z-index: 11;
}

/* Attemps to fix active link on KB page in dark mode */
.sidebarItemLink_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module .sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module {
  color: #e2e3e7 !important;
}
.sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module {
  color: #E2E3E7 !important;
}

.sidebar_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module  {
  padding-right: 1rem;
}
/* Modify the prev and next links */
.pagination-nav__ {
  &link {
    border: none;
    background-color: var(--click-color-note-background);
  }

  &sublabel {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--click-color-text-muted);
  }

  &label {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    font-weight: 600;
    color: var(--click-color-text);

    &::after {
      content: none;
    }
  }
}

/* keep the navbar from disappearing when scrolling */
.navbar--fixed-top {
  position: fixed;
  width: 100%;
}
/* Rich's attempt to add scrollbar to nav */
.sidebar_mhZE {
  height: 100% !important;
}
/* Make the navbar move with the page */
/* .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
  max-height: unset !important;
}
*/

/* In the knowledgebase, the top nav sits on top of the article. This moves it down */
.margin-bottom--xl {
  margin-top: 60px;
}
.hero__title, .title_f1Hy {
  font-size: 32px !important;
}
.title_node_modules-\@docusaurus-theme-classic-lib-theme-BlogPostItem-Header-Title-styles-module {
  font-size: 32px !important;
}

.sidebarViewport_Xe31 {
  max-height: unset !important;
}

/* give some space for the breadcrumbs */
.padding-top--md, .padding-vert--md {
  padding-top: var(--ifm-navbar-height) !important;
}

/* Docsearch from Algolia */
[data-theme='light'] .DocSearch mark {
  --docsearch-highlight-color: black;
}

[data-theme='dark'] .DocSearch mark {
  --docsearch-highlight-color: white;
}

[data-theme='dark'] .theme-admonition-tip.alert--success .alert-content  {
  background-color: rgba(255,255,255,0.1);
}

[data-theme='dark'] .DocSearch-Hit-source {
  color: white;
}

[data-theme='dark'] .footer {
  background-color: var(--click-color-background);
}

.table-of-contents {
  font-size: inherit;
}
/* right hand table of contents */
.table-of-contents__link {
  color: var(--ifm-toc-link-color);
}

.table-of-contents__link--active {
  color: var(--ifm-toc-link-color--active);
}

/* Remove the filter, which was changing the
 * color of the > in dark mode */
.menu__caret:before {
  filter: none !important;
  padding-right: var(--doc-menu-caret-right-padding);
}

.menu__link--sublist-caret:after {
  padding-right: var(--doc-menu-caret-right-padding);
}

.menu__caret {
  padding-top: 0px !important;
  padding-bottom: 0px !important;

}

.navbar__logo {
  height: 40px;

  img {
    height: inherit;
    width: inherit;
    /* override the normal white background color
     * and remove the drop shadow filter for img
     * when it is inside  of a .navbar__logo
     * or in the columns on the doc homepage */
    filter: none;
    background-color: transparent;
    box-shadow: none;
  }
}

/* this is for the docs homepage, no filter
 * and add a background color. set the width
 * on the images in the row. */
.col--4 img {
  filter: none;
  background-color: white;
  max-width: 200px;
}

.theme-doc-sidebar-container img {
  filter: none;
  background-color: transparent;
}

.navbar__title {
  font-family: Hind Siliguri, sans-serif;
  font-size: 18px;
  line-height: 21px;
}

.hero--primary {
  /*background-image: url('../../static/img/image_mountain.png'); */
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  transition: opacity 1.2s, transform 1.6s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero {
  --ifm-button-font-weight: 700;
}
.title_node_modules-\@docusaurus-theme-classic-lib-theme-BlogPostItem-Header-Title-styles-module {
  font-size: 2rem !important;
}
article[itemprop="blogPost"] {
  margin-top: 2rem;
}

.adopters-table {
  overflow-x: auto;
  width: 100%;

  th {
    padding: 0;
    padding-left: 0.7rem;
    text-align: left;
  }
}

/* the buttons on the hompage stack on cell phones - this seems to fix it */
.buttons_src-pages-docs-index-module {
  display: flow-root !important;
}

.buttons_src-pages-index-module {
  display: block !important;
}

.buttons_s0t3 {
  display: flow-root !important;
}

html {
  font-size: 16px;
}

/* === Base <code> styles === */
code {
  font-weight: bold;
  font-size: 0.95em;
  border-radius: 0;
  padding: 0.15em 0.35em !important;
  scrollbar-width: thin;
  scrollbar-color: rgb(99, 99, 99) rgb(41, 45, 62);
}

/* Normalize inner span styles */
code span {
  font-style: normal !important;
}

/* === Theme-specific inline <code> backgrounds === */
html[data-theme='dark'] pre,
html[data-theme='dark'] pre code,
html[data-theme='dark'] code {
  background: none !important;
  background-color: #282828 !important;
  box-shadow: none !important;
  filter: none !important;
  border: none !important;
}

html[data-theme='light'] code {
  background-color: #f5f5f5 !important;
  color: #000 !important;
}

/* === Block code (pre) === */
pre {
  padding: 1em 1em 1em 1em !important;
  border-radius: 0 !important;
}

html[data-theme='light'] pre,
html[data-theme='light'] pre code {
  background-color: #f5f5f5 !important;
  color: #000 !important;
}

html[data-theme='dark'] pre,
html[data-theme='dark'] pre code {
  background-color: #282828 !important;
  color: var(--prism-color);
}

/* === Prism token styles (Dark Theme) === */
code .token.keyword {
  font-style: italic !important;
  color: rgb(86, 156, 214) !important;
}

code .token.plain {
  color: rgb(156, 220, 254) !important;
}

code .token.punctuation {
  color: rgb(199, 146, 234) !important;
}

code .token.operator {
  color: rgb(137, 221, 255) !important;
}

code .token.string {
  color: rgb(206, 145, 120) !important;
}

code .token.number {
  color: rgb(181, 206, 168) !important;
}

code .token.function {
  color: rgb(220, 220, 170) !important;
}

/* === Prism token styles (Light Theme) === */
html[data-theme='light'] code .token.keyword {
  font-style: italic !important;
  color: rgb(0, 92, 154) !important;
}

html[data-theme='light'] code .token.plain {
  color: rgb(36, 41, 46) !important;
}

html[data-theme='light'] code .token.identifier {
  color: rgb(0, 102, 204) !important;
}

html[data-theme='light'] code .token.punctuation {
  color: rgb(125, 86, 148) !important;
}

html[data-theme='light'] code .token.operator {
  color: rgb(0, 112, 138) !important;
}

html[data-theme='light'] code .token.string {
  color: rgb(163, 21, 21) !important;
}

html[data-theme='light'] code .token.number {
  color: rgb(34, 134, 58) !important;
}

html[data-theme='light'] code .token.function {
  color: rgb(88, 92, 63) !important;
}

/* Ensure keywords are not italic if nested */
html[data-theme='light'] code span.token.keyword,
code span.token.keyword {
  font-style: normal !important;
}

.markdown h1:first-child {
  font-size: 32px !important;
}

/* this is for breadcrumbs, except the current page (far right) */
/* the current page is the `--active` one next */
.breadcrumbs__link {
  padding: 0;
  color: var(--click-color-text-muted);
  background-color: transparent;
  font-size: inherit;
}

.breadcrumbs__text--active {
  color: var(--click-color-text);
  background-color: transparent;
  font-size: inherit;
}

.breadcrumbs__item {
  &:not(:last-child):after {
    font-size: inherit;
    content: '\/' !important;
  }

  &--active {
    font-weight: 600;
  }
}

.table-of-contents__link:hover, .table-of-contents__link:hover code, .table-of-contents__link--active, .table-of-contents__link--active code {
  font-weight: 600;
  color: var(--click-color-text);
}

.menu {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  font-weight: 400;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.details_node_modules-\@docusaurus-theme-common-lib-components-Details-styles-module {
  color: #f1f6f9;
}
.alert {
  border-color: var(--clickhouse-blue);
  --ifm-alert-foreground-color: var(--click-color-text);
}

/* text headings within admonitions */
.admonition h5 {
  --ifm-heading-color: #27242D;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}


.tabs__item--active {
  --ifm-tabd-color: var(--click-color-accent);
}

.tabs__item {
  margin-left: 0.3rem;
  border-top-left-radius: var(--ifm-global-radius);
  border-top-right-radius: var(--ifm-global-radius);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-color: var(--ifm-tabd-color);
  border-bottom-width: 2px;
  transition: all;

  &:hover {
    color: var(--click-color-text);
  }
}

/* Padding for the buttons on the home page */
.button--lg {
  margin: 10px 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 178 0/var(--tw-bg-opacity));
  color: white;
  font-size: 14px;
  font-weight: 700;
  font-stretch: 100%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.button.button--secondary {
  color: white;
}

.menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
  padding-left: 30px;
}

.theme-doc-sidebar-item-category-level-1 .theme-doc-sidebar-item-link-level-1 {
  padding-left: 0;
}

@media (max-width: #{breakpoints.$mobile-breakpoint}) {
  .theme-doc-sidebar-container,
  .theme-doc-sidebar-container *,
  .docsMobileMenuItems,
  .menu__list {
    display: block !important;
    visibility: visible !important;
  }
}

li.theme-doc-sidebar-item-category-level-1 {
  .menu__list-item-collapsible {
    font-weight: 700;
    &:hover > a[href] {
      background: var(--ifm-menu-color-background-hover);
    }

    & > .menu__link--active {
      font-weight: 700;
    }
  }

  &:not(:first-of-type) .menu__list-item-collapsible {
    margin-top: 24px;
  }
}

.theme-doc-sidebar-item-link-level-2 .theme-doc-sidebar-item-category-level-2 {
  padding-left: 0;
}

/* Nested nav menu items */
.theme-doc-sidebar-item-link-level-3, .theme-doc-sidebar-item-link-level-4 {
  padding-left: 0.75rem;
}

.theme-doc-sidebar-item-category-level-3, .theme-doc-sidebar-item-category-level-4 {
  padding-left: 0.75rem;
}

.theme-doc-sidebar-item-link-level-5 {
  padding-left: 1.2rem;
}

.theme-doc-sidebar-item-category-level-5 {
  padding-left: 1.2rem;
}

.theme-doc-sidebar-item-link-level-6 {
  padding-left: 1.2rem;
}

.theme-doc-sidebar-item-category-level-6 {
  padding-left: 2.2rem;
}

li.theme-doc-sidebar-item-category-level-2 > .menu__list {
  border-left: 1px solid var(--click-color-stroke);
}

.menu__list-item--collapsed .menu__link--sublist:after, .menu__list-item--collapsed .menu__caret:before {
  padding-right: var(--doc-menu-caret-right-padding);
}

li.theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible {
  font-weight: 400 !important;
  margin-top: 0 !important;
  /*  font-size: 14px !important; */
}

.sub-menu-link .menu__link--sublist {
  font-weight: 700;
}

.menu__link {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;

  &--active {
    font-weight: 600;
  }
}

/* background color of the main container on the docs pages */
.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocPage-styles-module {
  background: #f8f8f8;
}

.docMainContainer_TCnq {
  background: #f8f8f8;
}

/* the h1 style on the category pages overrides the font-size */
.title_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocCategoryGeneratedIndexPage-styles-module {
  --ifm-h1-font-size: 2.5rem !important;
}

.title_kItE {
  --ifm-h1-font-size: 2.5rem !important;
}

prism-code {
  --prism-background-color: var(--click-color-codeblock-background) !important;
}

/* Add a drop shadow to images in the user guides and docs */

.eighty-percent {
  max-width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.col--4 h3 {
  font-size: 20px;
  font-weight: 700;
}

.col--4 p {
  font-size: 14px;
  font-weight: 400;
}

/* The auto-generated folder pages using DocCard */
.card {
  border-radius: unset;
  box-shadow: unset !important;
  border-left: unset !important;
  border-right: unset !important;
  border-bottom: unset !important;
  border-top: 2px solid black;
}

.row .col.col--6 {
  --ifm-col-width: 100%;
}

.cardContainer_src-theme-DocCard-styles-module {
  height: 100px;
}

.padding--lg {
  padding: 0.6rem !important;
}

.language-response button {
  display: none;
}

.language-response pre {
  border-style: none;
  color: crimson;
}


/* Font colors on the ANSI compatibilty page */
.text-warning {
  color: var(--click-color-warning-text) !important;
  font-weight: bold;
}

.text-success {
  color: var(--click-color-success-text) !important;
  font-weight: bold;
}

.text-danger {
  color: var(--click-color-danger-text) !important;
  font-weight: bold;
}

.notfound {
  margin-left: unset !important;
  margin-right: 6rem;
}

.sidebarWithHideableNavbar_d0QC {
  background-color: #312D3B;
}

.margin-bottom--lg {
  margin-bottom: 0rem !important;
  padding: 0.1rem !important;
}

.margin-top--lg li {
  margin-left: 3rem;
}

/* Fixes spacing on large displays, but doesn't work well on the home page */
.main-wrapper {
  flex: 1;
  display: flex;
  min-height: 100%;
}

/* This fixes the homepage */
.homepage-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.homepage-wrapper .main-wrapper {
  display: block !important;
  flex: 1 1 auto;
  min-height: auto;
}

.blog-wrapper .main-wrapper .container {
  margin-top: 4rem !important;
}

@media screen and (min-width: breakpoints.$laptop-breakpoint) {
  .blog-wrapper .main-wrapper .container {
    margin-top: 8rem !important;
  }
}

.container {
  max-width: 100%;
}

.navbar {
  flex: 0 0 var(--ifm-navbar-height);
  background: var(--click-color-background);
  background-attachment: fixed;
  height: auto;
}

.search-result-match {
  font-size: 1.3rem;
}

.searchResultItemHeading_KbCB {
  font-size: 1.3rem;
}

.transparent-table table thead th, table td {
    border-collapse: collapse;
    background: transparent;
    font-weight: normal;
    border: none;
}

/* Trying to get the Vimeo video to be 100% width and height */
.vimeo-container {
  --video--width: 1296;
  --video--height: 730;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%);
  overflow: hidden;
  max-width: 100%;
  background: white;
  margin-bottom: 10px;
}

.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.two_column_home_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  grid-gap: 24px;
  gap: 32px;
  margin-bottom: 32px;
}

@media screen and (max-width: 600px) {
  .two_column_home_list {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }
}

.clickable_tile, .clickable_square {
  background: var(--click-color-note-background);
  position: relative;
  border-radius: 8px;
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: 2px solid transparent;

  &:hover {
    cursor: pointer;
    box-shadow: var(--click-color-shadow) 0px 2px 4px 0px;
    text-decoration: none !important;
  }
}

.clickable_tile .title, .clickable_tile .description {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.clickable_tile .title {
  padding-bottom: 2px;
  font-size: 14px;
}

.clickable_tile .description {
  color: var(--click-color-text-muted);
  max-width: 80%;
}

.clickable_tile .clickable_tile_bg {
  position: absolute;
  right: -2px;
  bottom: -2px;
  background: transparent;
}

.clickable_square {
  display: flex;
  width: 64px;
  height: 64px;
  padding: 16px;
}

.clickable_square img {
  background: transparent;
  filter: none;
}

.horizontal-grid {
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 600px) {
  .horizontal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.view_all_link {
  display: flex;
  justify-content: flex-end;
  margin-top: -42px;
  margin-bottom: 24px;
}

.video_container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding-bottom: 16px;
}

/* Then style the iframe to fit in the container div with full height and width */
.video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.gradient_title {
  background-image: linear-gradient(to bottom, #ffc700, #ff7a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* spacing for the navbar items */
@media (min-width: 1240px) {
  .navbar__item {
    margin-left: 1px;
  }
}

.navbar__brand {
  display: flex;
  align-items: center;
  color: var(--click-color-text);
}

@media (max-width: 1239px) {
  .navbar__item {
    margin-left: 0px;
  }
}

.nav-items-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  white-space: nowrap;
  padding: 0.5rem 0;
  margin-top: auto;

  * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

}

.navbar-sidebar__item {

  .sign-in {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    height: 32px;
    min-width: auto;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    transition: all .15s;
    opacity: 1;
    border: 1px solid var(--click-color-secondary-button-stroke);
    color: var(--click-color-secondary-button-text);

    &:hover {
      background: var(--click-color-secondary-button-stroke);
    }
  }
}

.navbar__items {
  gap: 1rem;

  .navbar__link, .navbar__item {
    display: flex;
    align-items: center;
    font-size: inherit;
    line-height: inherit;

    &:not(.click-button) {
      padding: 0;
    }
  }

  &.navbar__items--right {
    .navbar__item:last-child {
      background: red;
    }

    @media (max-width: 450px) {
      .nav-items-btns a:first-child {
        display: none;
      }
    }
    @media (max-width: 500px) {
      .navbar__item:first-child {
        display: none;
      }
    }
    @media (max-width: 360px) {
      .navbar__item {
        display: none;
      }
    }
  }

  .dropdown__link {
    padding: .5rem 1.5rem;
  }
}

[data-theme='light'] .secondary-nav--items .navbar__link {
  color: rgb(100, 100, 100);
  font-weight: 600;
}

[data-theme='dark'] .secondary-nav--items .navbar__link {
  font-weight: 600;
}

.dropdown {

  & > .navbar__link:after {
    border: none;
    background: var(--ifm-menu-link-sublist-icon);
    background-position: center;
    transform: rotate(180deg);
    height: var(--default-line-height);
    width: var(--default-line-height);
    top: initial;
  }

  .dropdown__link {
    border-radius: 0;
    margin: 0;
  }
}

@media screen and (max-width: var(--laptop-breakpoint)) {
  .dropdown {
    padding-right: 2px;
    padding-left: 20px;
  }
}

.markdown {
  table {
    border-radius: 4px;

    thead tr {
      border: 0;
    }

    tbody {
      border-radius: 4px;
    }
  }

  & > h2 {
    margin-top: 32px;
    padding-top: 32px;
    margin-bottom: 12px;
    --ifm-h2-font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 24px;
    border-top: 1px solid var(--click-color-stroke);
  }

  h1 {
    --ifm-h1-font-size: 1.75rem !important;
    font-weight: 700;
    line-height: 34px;
  }

  h3 {
    --ifm-h3-font-size: 1rem !important;
    line-height: 24px;
    font-weight: 700;
  }

  h4 {
    --ifm-h3-font-size: 1rem !important;
    line-height: 24px;
    font-weight: 700;
    color: var(--click-color-text-muted);
  }

  details {
    h1, h2, h3 {
    color: var(--ifm-font-color-base);
    }
  }

}

.main-content-wrapper {
  height: 100%;

  .row {
    height: 100%;
  }
}

button.DocSearch {
  width: 100%;
  border-radius: 4px;

  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  flex-shrink: 0;
  flex-grow: 0;
}

.footer__links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  gap: 1rem;
  color: inherit;
  font-size: inherit;
}

.footer__link-separator {
  display: none;
}

.click-button-anchor {
  text-decoration: none !important;
}

.click-button {
  display: flex;
  background: transparent;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
  height: 32px;
  min-width: auto;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  transition: all .15s;
  opacity: 1;
  border: none;

  &.primary-btn {
    background: var(--click-color-primary-button-background);
    color: var(--click-color-primary-button-text);

    &:hover {
      background: var(--click-color-primary-button-background-active);

    }
  }

  &.secondary-btn {
    border: 1px solid var(--click-color-secondary-button-stroke);
    color: var(--click-color-secondary-button-text);

    &:hover {
      background: var(--click-color-secondary-button-stroke);
    }
  }
}

.dropdown__menu {
  padding: 0;
}

.DocSearch-Search-Icon {
  height: 14px;
  width: 14px;
}

.DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
  display: block;
}

.theme-admonition-tip {
  &.alert--warning {
    .alert-icon {
      background: var(--click-color-warning-text);
    }

    .alert-content {
      background: var(--click-color-warning-background);
    }
  }

  &.alert--danger {
    .alert-icon {
      background: var(--click-color-danger-text);
    }

    .alert-content {
      background: var(--click-color-danger-background);
    }
  }

  &.alert--info {
    .alert-icon {
      background: var(--click-color-info-text);
    }

    .alert-content {
      background: var(--click-color-info-background);
    }
  }

  &.alert--success {
    .alert-icon {
      background: var(--click-color-success-text);
    }

    .alert-content {
      background: var(--click-color-success-background);
    }
  }

}

.margin-vert--lg, .margin-vert--xl {
  margin-top: var(--ifm-navbar-height) !important;
}

.footer__link-item{
  line-height: inherit;
  color: var(--docsearch-muted-color);
}

iframe {
  max-width: 100%;
  height: fit-content;
  aspect-ratio: 16/9;
}

.navbar__toggle {
  margin: 0;
}

[data-theme='light'] .navbar__link:hover {
  color: black;
}

[data-theme='light'] .navbar__link--active {
  color: black !important;
}

[data-theme='light'] .logo-color {
  fill: black;
}

[data-theme='dark'] .logo-color {
  fill: white;
}

nav[aria-label='Docs sidebar']:hover {
  overflow-y: auto !important;
}

/* Styling changes for the tags page */
.blog-tags-list-page {
  section.margin-vert--lg {
    margin-top: 2rem !important;
  }
}

/* Landing page at /docs/knowledgebase and the page shown when you click a tag */
.blog-list-page, .blog-tags-post-list-page {

  .container_mt6G {
    font-size: 0.85rem;
  }

  .title_xvU1 {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
  }

  .title_f1Hy {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
  }

  time {
    font-size: 14px;
    font-weight: 400;
  }

  .markdown {
    font-size: 14px;
    font-weight: 400;
  }

  .margin-vert--md {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
  }

  .docusaurus-mt-lg b {
    display: none !important;
  }

  .docusaurus-mt-lg {
    margin-top: 0.7rem !important;
  }
  .docusaurus-mt-lg ul {
    margin-left: 0 !important;
  }

  .margin-bottom--xl {
    margin-top: 30px !important;
    margin-bottom: 1rem !important;
  }

  .container_iJTo {
    margin-top: 8px !important;
    margin-bottom: 0px !important;
  }

  .docusaurus-mt-lg {
    margin-top: 12px !important;
  }
}

.tag_zVej span {
  border-radius: 9999px !important;
}
.tag_zVej::after {
  display: none;
}

.tag_zVej::before {
  display: none;
}

[data-theme='dark'] .tag_zVej {
  padding: 2px 12px;
  color: #C0C0C0;
  background-color: #A0A0A033;
  border-radius: 9999px;
  border: 1px;
}

[data-theme='light'] .tag_zVej {
  padding: 2px 12px;
  color: #53575F;
  background-color: var(--click-color-note-background);
  border-radius: 9999px;
}

[data-theme='light'] .tag_zVej span {
  color: white;
}

.blog-tags-post-list-page {
  .margin-bottom--xl {
    margin-bottom: 55px !important;
  }
}

.blog-post-page {
  .title_xvU1 {
    font-size: 34px;
  }

}

form.DocSearch-Button {
  justify-content: normal;
  margin-bottom: 24px;
  width: 98%;
}

.sidebarSearchContainer_BOHF {
  margin-bottom: 1rem !important;
  width: 98%;
}

/* Style changes to placeholder text of form element used in KBArticleSearch */

input::-webkit-input-placeholder { /* Chrome, Edge, Safari */
  color: var(--docsearch-muted-color);
}

input::-moz-placeholder { /* Firefox 19+ */
  color:var(--docsearch-muted-color);
}

input:-ms-input-placeholder { /* IE 10-11 */
  color: var(--docsearch-muted-color);
}

input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--docsearch-muted-color);
}

[data-theme='light'] .details_r1OI {
  --ifm-alert-background-color: #F6F7FA;
  --ifm-alert-foreground-color: var(--ifm-alert-foreground-color);
  border: 1px solid #E6E7E9;

  .details_lb9f > summary::before {
    border-color: transparent transparent transparent
    #437EEF;
  }
}

/* Fixes for the long menu bar */
@media (max-width: 1250px) {

  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"]::before {
    content: "KB";
    display: inline-block;
  }

  .docsNavDropdownContainer_cADf a[href="/docs/knowledgebase"] span{
    display: none;
  }
}

.blog-list-page .margin-bottom--xl, .blog-tags-post-list-page .margin-bottom--xl {
  margin-bottom: 1rem !important;
}

/* Used for ordered lists within docs pages */
.docs-ordered-list {
  padding-left: 40px;
  margin-bottom: 15px;
  list-style: decimal outside;
  li p {
    margin: 10px;
  }
}

/*announcement bar*/
.announcementBar_s0pr {
  position: fixed;
  width: 100%;
  z-index: 1000;
  left: 0;
  top: 102px;
}

[data-theme='dark'] .announcementBar_s0pr {
  color: white !important;
  background-color: var(--ifm-background-color) !important;

  .clean-btn {
    color: white !important;
  }
}

[data-theme='light'] .announcementBar_s0pr {
  color: black !important;
  background-color: white !important;

  .clean-btn {
    color: black !important;
  }
}

/* Install guide */
.installContainer {
  display: flex;
}

@media (max-width: breakpoints.$laptop-breakpoint) {
  .installContainer {
    flex-wrap: wrap;
  }
  .install-card {
    margin: 0;
  }
}

.install-card {
  margin: 0em 0.5em;
}

.prod-or-quick-install {
  display: flex;
  margin: 0.5em 0em;
}

.installInstructions {
  margin-top: 2em;
}

.DocSearch-Cancel {
  color: var(--docsearch-text-color) !important;
}

.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #aaa;
  outline: none; /* remove default outline, but keep focus styling if needed */
}

.tooltipText {
  visibility: hidden;
  width: max-content;
  max-width: 280px;
  background-color: #333;
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  border-radius: 4px;

  position: absolute;
  z-index: 100;
  top: 125%;       /* place tooltip below the term */
  left: 50%;
  transform: translateX(-50%);

  opacity: 0;
  transition: opacity 0.2s ease-in-out;

  white-space: pre-wrap;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  pointer-events: none; /* tooltip itself should not capture pointer */
}

.tooltipText.visible {
  visibility: visible;
  opacity: 1;
}

.tooltip-link {
  text-decoration: underline dotted;
  color: inherit; /* keep text color */
}

.tooltip-link:hover,
.tooltip-link:focus {
  text-decoration: underline solid;
  outline: none;
}

.custom-ul,
.custom-ol {
  //padding-inline-start: 2rem; // if we want to indent the lists
  margin-bottom: var(--ifm-paragraph-margin-bottom);
}

.custom-li {
  padding-inline-start: 0.5rem;
}

.vertical-stepper .custom-ul
.vertical-stepper .custom-ol {
  padding-block-end: 1.5rem;
}

.vertical-stepper > *:last-child {
  margin-bottom: 0;
}

.code-viewer {
  margin-bottom: var(--ifm-paragraph-margin-bottom);
}
