/* ========================================================================================
Custom styling on top of the PyData Sphinx Theme
========================================================================================== */
/* VARIABLES */
html[data-theme='light'] {
    --spark-color-primary: #09857c;
    --spark-color-heading-background: #1c223b;
    --spark-color-page-background: #ffffff;
    --spark-color-highlight-background: #f7f7f8;
    --pst-color-secondary-bg: #16cfb1 !important;
}
html[data-theme='dark'] {
    --spark-color-primary: #09857c;
    --spark-color-heading-background: #1c223b;
    --spark-color-page-background: #020316;
    --spark-color-highlight-background: #0d132b;
    --pst-color-secondary-bg: #5400c0 !important;
}
:root {
    --sd-color-card-background: var(--spark-color-highlight-background) !important;
    --pst-color-on-background:  var(--spark-color-highlight-background) !important;
}

@font-face {
  font-family: 'IntelOne-Display-Regular';
  src: url('./fonts/INTELONE-DISPLAY-REGULAR.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'IntelOne-Display-Light';
  src: url('./fonts/INTELONE-DISPLAY-LIGHT.TTF') format('truetype');
  font-weight:lighter;
  font-style: normal;
}
@font-face {
  font-family: 'IntelOne-Display-Mono';
  src: url('./fonts/INTELONE-MONO-FONT-FAMILY-REGULAR.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* GENERAL =============================================================================== */
html, body, html * {font-family: 'IntelOne-Display-Regular','Roboto', sans-serif;}
.bd-container {
  background-color: var(--spark-color-page-background) !important;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--spark-color-primary);
    font-family: 'IntelOne-Display-Light','Roboto', sans-serif;
    font-weight: normal;
}
h1 {font-size: 2.5rem}
h2 {font-size: 1.9rem}
h3 {font-size: 1.5rem}

hr {
  border-color: var(--spark-color-primary);
  border-width: 0.1rem;
  opacity: 100%;
}

.bd-page-width {
  max-width: 100% !important;  /* default is 88rem */
}
.bd-main .bd-content .bd-article-container {
  max-width: 70rem;  /* default is 60em */
}

html[data-theme=dark] .bd-content img:not(.only-dark,.dark-light) {
  background-color: unset !important;
  border-radius: unset !important;
}




/* SIDEBARS ============================================================================== */
.sidebar-secondary-items > .sidebar-secondary-item > [aria-label="source link"] {
  display: none;
}
.bd-docs-nav .bd-links__title {
  display: none;
}
#pst-primary-sidebar {
  background-color: var(--spark-color-highlight-background);
  max-width: 300px;
  border-right: 1px solid var(--pst-color-border);
  border-left: 1px solid var(--pst-color-border);
}
#pst-secondary-sidebar {
  background-color: var(--spark-color-page-background);
}

/* toggle sidebar buttons */
button.theme-switch-button:hover {color: var(--pst-color-secondary) !important;}
button.theme-switch-button:hover::before {border-bottom-style:none;}

button.sidebar-toggle {color: var(--spark-color-highlight-background) !important;}
button.sidebar-toggle:hover {color: var(--pst-color-secondary) !important;}
button.sidebar-toggle:hover::before {border-bottom-style:none;}




/* TOP BAR =============================================================================== */
/* top bar Spark border */
header.bd-header {
    border-top-width: 10px;
    border-top-style: solid;
    background-color: var(--spark-color-heading-background) !important;
    border-image: linear-gradient(90deg, #5400c0 5%, #057aff 50%, #16cfb1 98.99%) 1
}

/* top bar menu shift to left */
div.col-lg-3.navbar-header-items__start {
    width: auto;
    padding-right: 20px;
}

/* top bar text */
.logo__title,
.navbar-header-items__center ul li a,
.navbar-item button {
    color: #ffffff !important;
}

.navbar-brand .logo__title {
  padding-right: 20px;
  &:hover {
    text-decoration: none;
    color: var(--pst-color-secondary) !important;
  }
}


/* top bar text buttons and menus ======================================================== */
/* top bar buttons */
button.version-switcher__button,
.bd-header ul.navbar-nav>li.nav-item.dropdown>button.btn.dropdown-toggle.nav-item,
button.btn.search-button-field {
    border-style: solid;
    border-width: 2px !important;
    border-color: var(--pst-color-border);
    border-radius: 0em;
}
button.version-switcher__button:hover,
.bd-header ul.navbar-nav>li.nav-item.dropdown>button.dropdown-toggle:hover,
button.btn.search-button-field:hover {
    box-shadow: 0 0 0 .1875rem var(--pst-color-secondary) !important;
    border-color: transparent !important;
}

/* top bar search */
button.btn.search-button-field,
.search-button__kbd-shortcut .kbd-shortcut__modifier {
    background-color: var(--spark-color-heading-background) !important;
    color: #ffffff;
}
button.btn.search-button-field {
    padding-left:1em;
    padding-right:1em;
}




/* SECTION SWITCHER tweaks =============================================================== */
/* component selector dropdown area */
#pst-nav-more-links {
    background-color: var(--spark-color-heading-background);
    border-radius: 0em;
    & a.nav-link.dropdown-item:hover {
        background-color: unset;
        text-decoration-color: var(--pst-color-secondary) !important;
      }
}
button.theme-switch-button:hover {color: var(--pst-color-secondary) !important;}
button.theme-switch-button:hover::before {border-bottom-style:none;}


/* add a separator line after the first menu item and after suites*/
#pst-nav-more-links li:first-of-type {
    &:after {
        content: "AI Suites _________________________";
        margin-top: 0.3rem;
        margin-left: 0.8rem;
        color: var(--spark-color-primary);
    }
}
#pst-nav-more-links li:nth-of-type(6) {
    &:after {
        content: "Development _______________________";
        margin-top: 0.3rem;
        margin-left: 0.8rem;
        color: var(--spark-color-primary);
    }
}






/* CONTENT ELEMENTS ====================================================================== */

/* LINK WIDGET FOR INDEX PAGES */
.component_card_widget {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: left;
  float: right;
  padding: 0.5rem 0.5rem 0 0.5rem;
  background-color: var(--sd-color-card-background);
  & a {
    margin-bottom: 0.5rem;
    & img {
      width: 2em;
      height: 2em;
    }
  }
  &:after {
    clear: both;
  }
  & a:before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    background-size: 1.7rem !important;
    background-position: center;
    float: left;
    margin-right: 0.5em;
  }
}

html[data-theme="light"] .component_card_widget {
  & a.icon_document:before {background: url("../images/icon_document_l.svg") no-repeat;}
  & a.icon_download:before {background: url("../images/icon_download_l.svg") no-repeat;}
  & a.icon_github:before {background: url("../images/icon_github_l.svg") no-repeat;}
}

html[data-theme="dark"] .component_card_widget {
  & a.icon_document:before {background: url("../images/icon_document_d.svg") no-repeat;}
  & a.icon_download:before {background: url("../images/icon_download_d.svg") no-repeat;}
  & a.icon_github:before {background: url("../images/icon_github_d.svg") no-repeat;}
}






#searchbox .highlight-link {
  background-color: var(--spark-color-primary);
}

/* height of the Metro SDK manager container */
iframe#installerFrame {
    height: fit-content !important;
}